javascript - 在滚动移动到下一部分

Question

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

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

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

标签： javascripthtmlcssscroll

Answer 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>