javascript - 从锚点到锚点滚动多个 div
问题描述
我有另一个问题。最近我正在尝试构建一个包含三个 div 的页面。它们每个的高度为 100vh,宽度为 100vw。我要存档的是,如果我在 div 1 中滚动,它会自动平滑滚动到 div 2 的顶部。依此类推。我希望你能理解我的问题。
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
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>
推荐阅读
- sql - 在雪花中,我想找到按包含关键字的相同会话 ID 分组的整个对话
- javascript - 在新模板中显示点击的图像
- jquery - 有时 javascript 加载正常而其他时候不起作用 - Laravel
- android - 如何提高启动时间反应原生应用程序?
- mobile - 移动 webapp:决定是否在触摸开始后阻止 visualViewport 滚动
- insert - DB2 在脚本中间插入临时表
- javascript - JS:重塑一个类
- node.js - 在后端安全地运行 bash 脚本?
- google-apps-script - Google Sheet - 如何将两行复制到选定行之后?
- json - ElasticSearch/Kibana 在使用 JSON 输入的可视化中检索字符串的特定部分