Html Question posted in
Some basic documentation can be found here.

Html – Smooth scroll transition between child and parent

<html>
<style>
.App {
  font-family: sans-serif;
  text-align: center;
  .child {
    padding-left: 100px;
    padding-right: 100px;
    height: 100vh;
    overflow-y: scroll;
  }
  .child::-webkit-scrollbar {
    display: none;
  }
}
</style>

<body>
<div class="App">
  <div class="parent">
    <div class="child">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor
        posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue
        non. Donec eget urna venenatis, viverra sapien in, bibendum eros.
      </p>

      <p>
        Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus
        semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere
        vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae,
        semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi.
      </p>

      <p>
        Phasellus tincidunt sem sit amet ultrices sagittis. Fusce imperdiet congue volutpat. Aenean nec accumsan eros. Mauris pharetra purus nisl, a egestas lectus mattis non. Vivamus commodo maximus libero eu volutpat. Duis pellentesque, felis eu accumsan varius,
        augue est bibendum augue, id volutpat urna ante imperdiet orci. Interdum et malesuada fames ac ante ipsum primis in faucibus.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor
        posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue
        non. Donec eget urna venenatis, viverra sapien in, bibendum eros.
      </p>

      <p>
        Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus
        semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere
        vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae,
        semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi.
      </p>
    </div>

    <div>
      Nunc feugiat, odio quis consectetur faucibus, mauris justo hendrerit mauris, in facilisis sapien felis sed est. Cras lacus odio, tempus vel luctus ut, commodo id odio. Suspendisse euismod rutrum dui, non congue ligula cursus ut. Nulla at semper sapien.
      Morbi nec libero placerat, suscipit erat ut, malesuada orci. In in purus convallis, luctus diam nec, sollicitudin tortor. Proin pretium sagittis quam, eget dignissim urna vehicula eget. Mauris id malesuada sem, nec hendrerit lacus. Proin ut justo
      neque.
    </div>

    <div>
      In hac habitasse platea dictumst. Phasellus vel tempor dui. Vivamus ut elementum ex. Sed a tempus leo. Nunc ut ipsum non lacus cursus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed quis erat ligula. Quisque ultricies nulla
      tortor, et tempus felis vestibulum malesuada. Nulla facilisi. Mauris id dui sodales ante aliquet suscipit. Aliquam viverra, ante laoreet bibendum vestibulum, dolor elit vulputate urna, ut lobortis tellus tortor nec felis.
    </div>
  </div>
</div>
</body>
</html>

I have two nested containers. One that displays first, scrolls to the end and another one that starts the scroll when the first finishes.

Right now the transition from the first to the second container happens after a slight stop in the scroll. I need to make this transition smoother. Any help is appreciated.

Thank you!

Tags:

2

Answers


  1. 0

    To achieve a smoother transition between the two containers without a noticeable stop in the scroll, you can use JavaScript to synchronize the scrolling between the two containers. Here’s an example of how you can modify your HTML and add a simple JavaScript script to achieve this effect:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Smooth Scroll Transition</title>
  <style>
    .App {
      font-family: sans-serif;
      text-align: center;
      overflow: hidden;
    }

    .parent {
      display: flex;
      flex-direction: column;
    }

    .child, .child2 {
      padding: 20px;
      overflow-y: scroll;
      transition: transform 0.5s ease-in-out;
      height: 100vh;
    }

    .child2 {
      background-color: #f0f0f0; /* Add background color to distinguish the two containers */
    }
  </style>
</head>
<body>
  <div class="App">
    <div class="parent">
      <div class="child" id="container1">
                         <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor
        posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue
        non. Donec eget urna venenatis, viverra sapien in, bibendum eros.
      </p>

      <p>
        Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus
        semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere
        vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae,
        semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi.
      </p>

      <p>
        Phasellus tincidunt sem sit amet ultrices sagittis. Fusce imperdiet congue volutpat. Aenean nec accumsan eros. Mauris pharetra purus nisl, a egestas lectus mattis non. Vivamus commodo maximus libero eu volutpat. Duis pellentesque, felis eu accumsan varius,
        augue est bibendum augue, id volutpat urna ante imperdiet orci. Interdum et malesuada fames ac ante ipsum primis in faucibus.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor
        posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue
        non. Donec eget urna venenatis, viverra sapien in, bibendum eros.
      </p>

      <p>
        Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus
        semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere
        vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae,
        semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi.
      </p>

      </div>

      <div class="child2" id="container2">
        <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor
        posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue
        non. Donec eget urna venenatis, viverra sapien in, bibendum eros.
      </p>

      <p>
        Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus
        semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere
        vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae,
        semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi.
      </p>

      <p>
        Phasellus tincidunt sem sit amet ultrices sagittis. Fusce imperdiet congue volutpat. Aenean nec accumsan eros. Mauris pharetra purus nisl, a egestas lectus mattis non. Vivamus commodo maximus libero eu volutpat. Duis pellentesque, felis eu accumsan varius,
        augue est bibendum augue, id volutpat urna ante imperdiet orci. Interdum et malesuada fames ac ante ipsum primis in faucibus.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor
        posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue
        non. Donec eget urna venenatis, viverra sapien in, bibendum eros.
      </p>

      <p>
        Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus
        semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere
        vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae,
        semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi.
      </p>
      </div>
    </div>
  </div>

  <script>
    var container1 = document.getElementById('container1');
    var container2 = document.getElementById('container2');

    container1.addEventListener('scroll', function () {
      var scrollPercentage = container1.scrollTop / (container1.scrollHeight - container1.clientHeight);
      var translateY = -scrollPercentage * (container2.scrollHeight - container2.clientHeight);
      container2.style.transform = 'translateY(' + translateY + 'px)';
    });
  </script>
</body>
</html>

    I rewrited the code.

    Login or Signup to reply.
  2. 0 
    const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

parent.addEventListener('wheel', (event) => {
  event.preventDefault();
  event.stopPropagation();

  const toBottom = event.deltaY > 0;
  const isChildScrolledToEnd = child.scrollHeight - child.scrollTop === child.clientHeight;
  const isParentScrolledToBegin = parent.scrollTop === 0;

  if ((toBottom && isChildScrolledToEnd) || (!toBottom && !isParentScrolledToBegin)) {
    parent.scrollBy({
      top: event.deltaY,
      behavior: "instant"
    });
  }
  if ((toBottom && !isChildScrolledToEnd) || (!toBottom && isParentScrolledToBegin)) {
    child.scrollBy({
      top: event.deltaY,
      behavior: "instant"
    });
  }

}, false);
    .parent {
  overflow: auto;
  height: 100vh;
  background-color: tomato;
}

.child {
  padding-left: 100px;
  padding-right: 100px;
  max-height: 100vh;
  overflow: auto;
  background-color: #fec;
}

body {
  margin: 0;
}
    <html>

<body>
  <div class="App">
    <div class="parent">
      <div class="child">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor
          posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue
          non. Donec eget urna venenatis, viverra sapien in, bibendum eros.
        </p>

        <p style="color: red">
          Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus
          semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere
          vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae,
          semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi.
        </p>

        <p style="color: brown">
          Phasellus tincidunt sem sit amet ultrices sagittis. Fusce imperdiet congue volutpat. Aenean nec accumsan eros. Mauris pharetra purus nisl, a egestas lectus mattis non. Vivamus commodo maximus libero eu volutpat. Duis pellentesque, felis eu accumsan varius,
          augue est bibendum augue, id volutpat urna ante imperdiet orci. Interdum et malesuada fames ac ante ipsum primis in faucibus.
        </p>

        <p style="color: green">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor
          posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue
          non. Donec eget urna venenatis, viverra sapien in, bibendum eros.
        </p>

        <p style="color: darkblue">
          Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus
          semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere
          vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae,
          semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor
          posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue
          non. Donec eget urna venenatis, viverra sapien in, bibendum eros.
        </p>

        <p style="color: red">
          Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus
          semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere
          vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae,
          semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi.
        </p>

        <p style="color: brown">
          Phasellus tincidunt sem sit amet ultrices sagittis. Fusce imperdiet congue volutpat. Aenean nec accumsan eros. Mauris pharetra purus nisl, a egestas lectus mattis non. Vivamus commodo maximus libero eu volutpat. Duis pellentesque, felis eu accumsan varius,
          augue est bibendum augue, id volutpat urna ante imperdiet orci. Interdum et malesuada fames ac ante ipsum primis in faucibus.
        </p>

        <p style="color: green">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor
          posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue
          non. Donec eget urna venenatis, viverra sapien in, bibendum eros.
        </p>

        <p style="color: darkblue">
          Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus
          semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere
          vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae,
          semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi.
        </p>
      </div>

      <p>
        Nunc feugiat, odio quis consectetur faucibus, mauris justo hendrerit mauris, in facilisis sapien felis sed est. Cras lacus odio, tempus vel luctus ut, commodo id odio. Suspendisse euismod rutrum dui, non congue ligula cursus ut. Nulla at semper sapien.
        Morbi nec libero placerat, suscipit erat ut, malesuada orci. In in purus convallis, luctus diam nec, sollicitudin tortor. Proin pretium sagittis quam, eget dignissim urna vehicula eget. Mauris id malesuada sem, nec hendrerit lacus. Proin ut justo
        neque.
      </p>

      <p style="color: white">
        In hac habitasse platea dictumst. Phasellus vel tempor dui. Vivamus ut elementum ex. Sed a tempus leo. Nunc ut ipsum non lacus cursus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed quis erat ligula. Quisque ultricies nulla
        tortor, et tempus felis vestibulum malesuada. Nulla facilisi. Mauris id dui sodales ante aliquet suscipit. Aliquam viverra, ante laoreet bibendum vestibulum, dolor elit vulputate urna, ut lobortis tellus tortor nec felis.
      </p>
    </div>
  </div>
</body>

</html>

    I’m sorry, but I couldn’t implement smooth scrolling. If you add smooth scrolling to the scrollBy function, the scroll animation will become stuck. Most likely, it will be possible to implement such scrolling using imitation of the accumulation of the scroll delta. And making it work without glitches and brakes will not be easy :(. Maybe a little later I will implement an example with smooth animation. But I don’t promise

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search