从锚点滚动到多个div [英] Scroll through multiple divs from anchor to anchor

问题描述

我还有一个问题. 最近，我正在尝试建立一个包含三个div的页面.它们每个的高度为100vh，宽度为100vw. 我要存档的是，如果我在div 1中滚动，它将自动平滑地滚动到div 2的顶部.依此类推.我希望你能理解我的问题.

I have another question. Recently I am trying to build a page with three divs. Each of them has a height of 100vh and a width of 100vw. The thing I want to archive is, that if I am scrolling in div 1 that it automatically scrolls smooth to the top of div 2. And so on. I hope that you understand my question.

div {
  width: 100vw;
  height: 100vh;
}

div:nth-child(odd) {
  background-color: green;
}

div:nth-child(even) {
  background-color: red;
}

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

推荐答案

您可以使用 fullpage.js

You can use fullpage.js

new fullpage('#fullpage', {
  scrollOverflow:true
});

.section:nth-child(odd) {
  background-color: green;
}

.section:nth-child(even) {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.min.js" integrity="sha256-e13jRNqOX98m6UAwI/yZTpcDseJtA8s86yfFs4Sqrv8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/vendors/scrolloverflow.min.js" integrity="sha256-R7CttZ4L0/szai0hbFUlPDiRaEJmqYuvLhyAOr19vQg=" crossorigin="anonymous"></script>

<div id="fullpage">
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
</div>

这篇关于从锚点滚动到多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！