平滑水平滚动到一个部分

Question

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.我正在使用jQuery 可见库来检查视口中可见的部分。

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 HTML

<div id="main">
  <div class="outer-wrapper outer-wrapper__home">
    <div class="wrapper">
      <div id="firstSection" class="section"></div>
      <div id="secondSection" class="section"></div>
      <div id="thirdSection" class="section"></div>
    </div>
  </div>
</div>

JavaScript/jQuery (one method) JavaScript/jQuery（一种方法）

 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) JavaScript/jQuery（另一种方法）

 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',
        });
      } 
  });

Answer 1

This can be done without javascript or jQuery using scroll-snap-* css properties.这可以在没有 javascript 或 jQuery 的情况下使用 scroll-snap-* css 属性来完成。 Example below, demonstrate horizontal scrolling of sections using scroll-snap-*.下面的示例演示了使用 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 class="outer-wrapper outer-wrapper__home"> <div class="wrapper"> <div id="firstSection" class="section"><h1>First Section</h1></div> <div id="secondSection" class="section"><h1>Second Section</h1></div> <div id="thirdSection" class="section"><h1>Third Section</h1></div> </div> </div> </div> </html>

平滑水平滚动到一个部分

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-06-22 06:50:03

平滑水平滚动到一个部分

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-06-22 06:50:03

解决方案1
0 已采纳 2022-06-22 06:50:03