Smooth Scroll using JS inside of a container

I’m trying to create a smooth scroll effect with js. I’ll be using flex-box & grid to setup a layout and I will have sidebars and other containers with scrollable content. I am able to get the smooth scroll effect if I target the body element but I want the smooth scroll effect inside a container within the body. Smooth scroll will only work if the entire page scrolls and I don’t want that, I want the background to be fixed and only certain containers should be able to have smooth scroll. Can someone please look over my code? Sometimes a second pair of eyes is really helpful as I have been scratching my head trying to make this work, thanks.

Here’s the YouTube link of what the smooth scroll effect is supposed to look like.

https://www.youtube.com/watch?v=dXUyWUX4HJo&t    

It basically has a really nice buttery smooth feel when scrolling, I just can’t replicate it within a container only in the body.

https://codepen.io/dtm85/pen/gOwJjEY    
const body = document.getElementsByClassName("content-wrapper")[0],
        scrollWrap = document.getElementsByClassName(
          "smooth-scroll-wrapper"
        )[0],
        height = scrollWrap.getBoundingClientRect().height - 1,
        speed = 0.04;

      var offset = 0;
      body.style.height = Math.floor(height) + "px";

      function smoothScroll() {
        offset += (window.pageYOffset - offset) * speed;

        var scroll = "translateY(-" + offset + "px) translateZ(0)";
        scrollWrap.style.transform = scroll;

        callScroll = requestAnimationFrame(smoothScroll);
      }

      smoothScroll();
/* Reset */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  background: #161616;
  /* overflow: hidden; */
}

/* Scrollbar Color */
.content-wrapper::-webkit-scrollbar {
  width: 0.6rem;
  height: 0.6rem;
}

.content-wrapper::-webkit-scrollbar-track {
  background: transparent;
  position: relative;
  margin-top: 25px;
  margin-bottom: 25px;
  height: 95vh;
}

.content-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.7);
  color: transparent;
  border-radius: 8rem;
}

/* Smooth Scroll */
.content-wrapper {
  backdrop-filter: blur(8.5px);
  background: rgb(112, 111, 111);
  border-radius: 25px;
  width: 90%;
  max-height: 90%;
  margin: 4% 5%;
  position: relative;
  overflow-y: scroll;
}

.smooth-scroll-wrapper {
  position: relative;
  top: 0;
  left: 0;
}

.content {
  width: 80%;
  margin: 160px auto;
  position: relative;
  overflow: hidden;
}

.content h1 {
  font-size: 55px;
}

.content p {
  margin-top: 20px;
  font-size: 20px;
  line-height: 24px;
}

.img {
  margin-top: 30px;
  width: 100%;
  height: 300px;
  background: #140214 no-repeat 50% 50%;
  background-size: cover;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #00eeff;
}

h1,
h2 {
  line-height: 1.2;
  margin: 10px 0;
  letter-spacing: 1.5px;
}

img {
  width: 100%;
}

/* Navbar */
.menu-btn {
  display: none;
}

.nav-container {
  z-index: 10;
  background-color: #000107;
  color: #fff;
  height: 7vh;
  position: relative;
  top: 0;
  width: 100%;
}

.nav-container .nav-list {
  display: flex;
}

.nav-container a {
  letter-spacing: 2px;
  font-size: 1.1rem;
  color: #fff;
  padding: 10px;
  margin: 0 25px;
  display: flex;
  justify-content: center;
  position: relative;
}

.nav-container .flex {
  justify-content: space-between;
}

/* Utilities */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/projects/smooth-scroll/test/style.css" />
    <title>Smooth Scroll Test</title>
  </head>
  <body>
    <!-- Navbar -->
    <header class="nav-container">
      <div class="container flex">
        <h1 class="logo">Logo</h1>
        <nav class="navbar">
          <div class="menu-btn">
            <div class="menu-burger"></div>
          </div>
          <ul class="nav-list">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- Content -->
    <div class="content-wrapper">
      <div class="smooth-scroll-wrapper">
        <div class="content">
          <h1>Main Headding 1</h1>
          <div class="img"></div>

          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem animi
            ipsam itaque doloribus aliquid, veniam minus laborum doloremque quos
            ullam. Quas harum iure optio dolorem ea recusandae blanditiis ipsum
            praesentium.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam
            excepturi tenetur sapiente dolor deleniti. Fuga labore pariatur
            esse. Repudiandae, voluptates nisi soluta architecto inventore hic.
            Omnis eos expedita sed architecto illum mollitia! Totam aperiam vel
            consequuntur a, ipsum sapiente sit laborum exercitationem distinctio
            labore praesentium veniam accusamus, voluptate ratione suscipit!
          </p>
          <div class="img"></div>

          <h1>Main Headding 2</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos
            architecto suscipit ducimus nostrum, aut minus eius impedit vero
            numquam est optio reprehenderit itaque quis eligendi quasi
            repellendus obcaecati neque dolor ipsam nulla praesentium
            voluptatum. Est assumenda ea voluptatibus! Eaque quo ducimus, unde
            maxime enim nesciunt debitis voluptatem fuga obcaecati? Aperiam?
          </p>

          <div class="img"></div>

          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est ea
            nihil quibusdam repudiandae praesentium quisquam eos, repellendus
            fugiat dolore! Neque.
          </p>
          <br />
          <br />
          <br />
          <br />
          <br />
          <h1>Main Headding 3</h1>
          <div class="img"></div>

          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem animi
            ipsam itaque doloribus aliquid, veniam minus laborum doloremque quos
            ullam. Quas harum iure optio dolorem ea recusandae blanditiis ipsum
            praesentium.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam
            excepturi tenetur sapiente dolor deleniti. Fuga labore pariatur
            esse. Repudiandae, voluptates nisi soluta architecto inventore hic.
            Omnis eos expedita sed architecto illum mollitia! Totam aperiam vel
            consequuntur a, ipsum sapiente sit laborum exercitationem distinctio
            labore praesentium veniam accusamus, voluptate ratione suscipit!
          </p>
          <div class="img"></div>

          <h1>Main Headding 4</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos
            architecto suscipit ducimus nostrum, aut minus eius impedit vero
            numquam est optio reprehenderit itaque quis eligendi quasi
            repellendus obcaecati neque dolor ipsam nulla praesentium
            voluptatum. Est assumenda ea voluptatibus! Eaque quo ducimus, unde
            maxime enim nesciunt debitis voluptatem fuga obcaecati? Aperiam?
          </p>

          <div class="img"></div>

          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est ea
            nihil quibusdam repudiandae praesentium quisquam eos, repellendus
            fugiat dolore! Neque.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

126 thoughts on “Smooth Scroll using JS inside of a container”

  1. Pingback: sildenafil 20mg
  2. Pingback: viagra sublingual
  3. Pingback: free viagra
  4. Pingback: viagra from canada
  5. Pingback: tadalafil dose
  6. Have you ever thought about adding a little bit more than just your articles?
    I mean, what you say is valuable and all. But imagine if you added some great images or video clips
    to give your posts more, “pop”! Your content is excellent but with images and
    videos, this site could certainly be one of the most beneficial in its niche.
    Amazing blog! http://cleckleyfloors.com/

    Reply
  7. Pingback: lasix 40 mg pill
  8. Pingback: careprost ebay
  9. Pingback: nolvadex generic
  10. Pingback: zanaflex medscape
  11. Pingback: generic sildenafil

Leave a Comment