Smooth scroll transition between child and parent

  Kiến thức lập trình
<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!

LEAVE A COMMENT