在滚动移动到下一部分

【问题标题】：On scroll move to next section在滚动移动到下一部分
【发布时间】：2021-02-16 14:06:11
【问题描述】：

我正在构建一个网站，当用户使用 html/css 和 js 在它们之间滚动时，我希望它自动移动到下一部分。

一个完美的例子是在 tesla 网站上：https://www.tesla.com/，只要您滚动该部分一次，网站就会自动向下移动到下一个或上一个部分。

如果有人能告诉我如何实现这一点，我很难在网上找到相关文档，谢谢

【问题讨论】：

调查intersectionObserver 在这里可能会很有帮助。如果您可以提供一个简短的 sn-p 显示您正在考虑的事情，它将帮助我们为您提供帮助。

标签： javascript html css scroll

【解决方案1】：

我已经为您创建了一个设置，用于检查您是否需要滚动到下一部分或上一部分。

我希望你可以从这个设置中创建其余部分

var lastScrollLocation = 0;

$(window).scroll(function() {
  if ($(window).scrollTop() > lastScrollLocation) {
    lastScrollLocation = $(window).scrollTop();
    console.log("next section");
  } else {
    lastScrollLocation = $(window).scrollTop();
    console.log("previous section");
  }
});

.container section {
  height: 100vh;
  display: flex;
}

.container section p {
   margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <section>
    <p>
      Section #1
    </p>

  </section>

  <section>
    <p>
      Section #2
    </p>
  </section>

  <section>
    <p>
      Section #3
    </p>
  </section>

  <section>
    <p>
      Section #4
    </p>
  </section>
</div>

【讨论】：