Smooth horizontal scrolling to a section-CodePudding

I am building a horizontal website. Each page has several sections.

I am trying to create the following functionality: When the user scrolls to the right, the page should scroll to the next avaiable section. If user scrolls to the left - return to the previous section. I am using the jQuery visible lib to check which section is visible in the viewport.

So far I tried different methods but none of them is working properly.

I will appreciate any help or directions. Thank you! :)

Here is my code:

HTML

<div id="main">
  <div >
    <div >
      <div id="firstSection" ></div>
      <div id="secondSection" ></div>
      <div id="thirdSection" ></div>
    </div>
  </div>
</div>

JavaScript/jQuery (one method)

 let lastScroll = 0;

   $('#main').on('scroll', function(event) {

      let st = $(this).scrollLeft();

      // Scrolling forward
      if (st > lastScroll && $('.wrapper .section:nth-child(1)').visible(true) ) {
            document.getElementById('secondSection').scrollIntoView({
                behavior: 'smooth',
         });
      }

      if (st > lastScroll && $('.wrapper .section:nth-child(2)').visible(true) ) {
            document.getElementById('thirdSection').scrollIntoView({
                behavior: 'smooth',
         });
      }

    // Scrolling back
    if (st < lastScroll && $('.wrapper .section:nth-child(2)').visible(true) ) {
            document.getElementById('firstSection').scrollIntoView({
                behavior: 'smooth',
         });
      }

    if (st < lastScroll && $('.wrapper .section:nth-child(3)').visible(true) ) {
            document.getElementById('secondSection').scrollIntoView({
                behavior: 'smooth',
         });
      }

  lastScroll = st;
});

JavaScript/jQuery (another method)

 window.addEventListener("wheel", function (e) {
    // Scrolling forward
    if ( e.deltaY > 0 && $('.wrapper .section:nth-child(1)').visible(true) ) {
       document.getElementById('secondSection').scrollIntoView({
       behavior: 'smooth',
      });
    }

    if ( e.deltaY > 0 && $('.wrapper .section:nth-child(2)').visible(true) ) {
       document.getElementById('thirdSection').scrollIntoView({
         behavior: 'smooth',
        });
     }

     // Scrolling back
     if ( e.deltaY < 0 && $('.wrapper .section:nth-child(2)').visible(true) ) {
         document.getElementById('firstSection').scrollIntoView({
           behavior: 'smooth',
         });
      }

     if ( e.deltaY > 0 && $('.wrapper .section:nth-child(3)').visible(true) ) {
        document.getElementById('secondSection').scrollIntoView({
           behavior: 'smooth',
        });
      } 
  });

CodePudding user response：

This can be done without javascript or jQuery using scroll-snap-* css properties. Example below, demonstrate horizontal scrolling of sections using scroll-snap-*.

.wrapper {
    display: flex;
    overflow-x: scroll;
    -ms-scroll-snap-destination: 0 0;
    scroll-snap-destination: 0 0;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory
}

.wrapper .section {
    height: 100vh;
    width: 100vh;
    min-width: 100vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.wrapper .section:nth-child(1) {
  background: red;
}

.wrapper .section:nth-child(2) {
  background: lightgreen;
}

.wrapper .section:nth-child(3) {
  background: yellow;
}

<html>
    <div id="main">
      <div >
        <div >
          <div id="firstSection" ><h1>First Section</h1></div>
          <div id="secondSection" ><h1>Second Section</h1></div>
          <div id="thirdSection" ><h1>Third Section</h1></div>
        </div>
      </div>
    </div>
</html>

CodePudding user response：

you can simply use CSS scroll snap type.

Here is the documentation. https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

And this super useful tutorial :D https://css-tricks.com/practical-css-scroll-snapping/

You can make the scroll snap to a position of said section.