jQuery 逐节滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19134967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 23:15:56 来源:igfitidea点击:
scroll to section by section
提问by Ing. Michal Hudak
I have HTML markup:
我有 HTML 标记：
HTML:
HTML：
<body>
<header></header>
<nav>
<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
</ul>
</nav>
<section id="one"></section>
<section id="two"></section>
<footer></footer>
</body>
where section is fullscreen(width: 100%; height:100%;) and menuhave absolute position.
其中部分是全屏的（宽度：100%；高度：100%；）并且菜单具有绝对位置。
Question:
题：
- How can I use mouse scroll (or keys ) to scroll and snap to each section?
- When scroll to lastsection then scroll-down to #oneagain and repeat it.
- When I click on link, it scroll to section.
- 如何使用鼠标滚动（或键）滚动和捕捉到每个部分？
- 当滚动到最后一部分时，再次向下滚动到 #one并重复它。
- 当我点击链接时，它会滚动到部分。
Thank you for your suggestions, ideas, code.
感谢您的建议，想法，代码。
回答by Ehsan Akbarzadeh
You can use ID in this case.
在这种情况下，您可以使用 ID。
Set the ID for your section and add anchor tag and set href attribute to your section id.
为您的部分设置 ID 并添加锚标记并将 href 属性设置为您的部分 ID。
<a href="#YourSectionID">Go Up</a> <!-- don't forget # before write your ID. -->
Don't forget set scroll-behavior to smooth for smooth scrolling.
不要忘记将滚动行为设置为平滑以平滑滚动。
回答by tamarin
Interesting
有趣的
I stole this code, changed the layout and tried to add the functions you mentioned (1. scroll-snap + 2. scroll when link is clicked). Unfortunately, I can't have this second function to work.
我偷了这段代码，更改了布局并尝试添加您提到的功能（1. 滚动快照 + 2. 单击链接时滚动）。不幸的是，我无法使用第二个功能。
- Adding scroll-snap is not a problem
- 添加滚动快照不是问题
You need scroll-snap-type: y mandatory;on the container and scroll-snap-align: start;on the sections.
您需要scroll-snap-type: y mandatory;在容器和scroll-snap-align: start;部分上。
var doc = window.document,
context = doc.querySelector('.js-loop'),
clones = context.querySelectorAll('.is-clone'),
disableScroll = false,
scrollHeight = 0,
scrollPos = 0,
clonesHeight = 0,
i = 0;
function getScrollPos () {
return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);
}
function setScrollPos (pos) {
context.scrollTop = pos;
}
function getClonesHeight () {
clonesHeight = 0;
for (i = 0; i < clones.length; i += 1) {
clonesHeight = clonesHeight + clones[i].offsetHeight;
}
return clonesHeight;
}
function reCalc () {
scrollPos = getScrollPos();
scrollHeight = context.scrollHeight;
clonesHeight = getClonesHeight();
if (scrollPos <= 0) {
setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling
}
}
function scrollUpdate () {
if (!disableScroll) {
scrollPos = getScrollPos();
if (clonesHeight + scrollPos >= scrollHeight) {
// Scroll to the top when you've reached the bottom
setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling
disableScroll = true;
} else if (scrollPos <= 0) {
// Scroll to the bottom when you reach the top
setScrollPos(scrollHeight - clonesHeight);
disableScroll = true;
}
}
if (disableScroll) {
// Disable scroll-jumping for a short time to avoid flickering
window.setTimeout(function () {
disableScroll = false;
}, 40);
}
}
function init () {
reCalc();
context.addEventListener('scroll', function () {
window.requestAnimationFrame(scrollUpdate);
}, false);
window.addEventListener('resize', function () {
window.requestAnimationFrame(reCalc);
}, false);
}
if (document.readyState !== 'loading') {
init()
} else {
doc.addEventListener('DOMContentLoaded', init, false)
}html,
body {
height: 100%;
overflow: hidden;
}
.Loop {
position: relative;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
scroll-snap-type: y mandatory;
}
section {
position: relative;
text-align: center;
height: 100%;
scroll-snap-align: start;
}
::scrollbar {
display: none;
}
body {
font-family: "Avenir Next", Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
position: relative;
}
nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
nav ul {
display: flex;
justify-content: space-around;
margin: 0;
padding: 1rem 0;
}
nav ul li{
display: flex;
justify-content: space-around;
}
.nav-link{
text-decoration: none;
color: grey
}
.one {
background: black;
}
.two {
background: darkblue;
}
.three {
background: lightgreen;
}
.four {
background: lightcoral;
}
.five {
background: lightskyblue;
}
.six {
background: orange;
}
h1 {
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
font-size: 80px;
letter-spacing: 5px;
color: #fff;
text-transform: uppercase;
}<nav>
<ul>
<li><a class="nav-link" href="#one">one</a></li>
<li><a class="nav-link" href="#two">two</a></li>
<li><a class="nav-link" href="#three">three</a></li>
<li><a class="nav-link" href="#four">four</a></li>
<li><a class="nav-link" href="#five">five</a></li>
<li><a class="nav-link" href="#six">six</a></li>
</ul>
</nav>
<main class="Loop js-loop">
<section class="one" id="one">
<h1>One</h1>
</section>
<section class="two" id="two">
<h1>Two</h1>
</section>
<section class="three" id="three">
<h1>Three</h1>
</section>
<section class="four" id="four">
<h1>Four</h1>
</section>
<section class="five" id="five">
<h1>Five</h1>
</section>
<section class="six" id="six">
<h1>Six</h1>
</section>
<!--
These blocks are the same as the first blocks to get that looping illusion going.
You need to add clones to fill out a full viewport height.
-->
<section class="one is-clone">
<h1>One</h1>
</section>
<section class="two is-clone">
<h1>Two</h1>
</section>
</main>- Adding the scrolling when you click on the link is a problem
- 单击链接时添加滚动是一个问题
With a normal container you only need to add the scroll-behaviour: smooth;to it. But here if you do that, you will lose the loop illusion because you will see it scroll backto the first instead of seemingly continue. (and it will also start an infinite back and forth scrolling that I couldn't fix yet)
对于普通容器，您只需要向其中添加scroll-behaviour: smooth;。但在这里，如果你这样做，你将失去循环错觉，因为你会看到它滚动回第一个而不是看似继续。（它还会启动我无法修复的无限来回滚动）
var doc = window.document,
context = doc.querySelector('.js-loop'),
clones = context.querySelectorAll('.is-clone'),
disableScroll = false,
scrollHeight = 0,
scrollPos = 0,
clonesHeight = 0,
i = 0;
function getScrollPos () {
return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);
}
function setScrollPos (pos) {
context.scrollTop = pos;
}
function getClonesHeight () {
clonesHeight = 0;
for (i = 0; i < clones.length; i += 1) {
clonesHeight = clonesHeight + clones[i].offsetHeight;
}
return clonesHeight;
}
function reCalc () {
scrollPos = getScrollPos();
scrollHeight = context.scrollHeight;
clonesHeight = getClonesHeight();
if (scrollPos <= 0) {
setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling
}
}
function scrollUpdate () {
if (!disableScroll) {
scrollPos = getScrollPos();
if (clonesHeight + scrollPos >= scrollHeight) {
// Scroll to the top when you've reached the bottom
setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling
disableScroll = true;
} else if (scrollPos <= 0) {
// Scroll to the bottom when you reach the top
setScrollPos(scrollHeight - clonesHeight);
disableScroll = true;
}
}
if (disableScroll) {
// Disable scroll-jumping for a short time to avoid flickering
window.setTimeout(function () {
disableScroll = false;
}, 40);
}
}
function init () {
reCalc();
context.addEventListener('scroll', function () {
window.requestAnimationFrame(scrollUpdate);
}, false);
window.addEventListener('resize', function () {
window.requestAnimationFrame(reCalc);
}, false);
}
if (document.readyState !== 'loading') {
init()
} else {
doc.addEventListener('DOMContentLoaded', init, false)
}html,
body {
height: 100%;
overflow: hidden;
}
.Loop {
position: relative;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
section {
position: relative;
text-align: center;
height: 100%;
scroll-snap-align: start;
}
::scrollbar {
display: none;
}
body {
font-family: "Avenir Next", Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
position: relative;
}
nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
nav ul {
display: flex;
justify-content: space-around;
margin: 0;
padding: 1rem 0;
}
nav ul li{
display: flex;
justify-content: space-around;
}
.nav-link{
text-decoration: none;
color: grey
}
.one {
background: black;
}
.two {
background: darkblue;
}
.three {
background: lightgreen;
}
.four {
background: lightcoral;
}
.five {
background: lightskyblue;
}
.six {
background: orange;
}
h1 {
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
font-size: 80px;
letter-spacing: 5px;
color: #fff;
text-transform: uppercase;
}<nav>
<ul>
<li><a class="nav-link" href="#one">one</a></li>
<li><a class="nav-link" href="#two">two</a></li>
<li><a class="nav-link" href="#three">three</a></li>
<li><a class="nav-link" href="#four">four</a></li>
<li><a class="nav-link" href="#five">five</a></li>
<li><a class="nav-link" href="#six">six</a></li>
</ul>
</nav>
<main class="Loop js-loop">
<section class="one" id="one">
<h1>One</h1>
</section>
<section class="two" id="two">
<h1>Two</h1>
</section>
<section class="three" id="three">
<h1>Three</h1>
</section>
<section class="four" id="four">
<h1>Four</h1>
</section>
<section class="five" id="five">
<h1>Five</h1>
</section>
<section class="six" id="six">
<h1>Six</h1>
</section>
<!--
This block is the same as the first block to get that looping illusion going.
You need to add clones to fill out a full viewport height.
-->
<section class="one is-clone">
<h1>One</h1>
</section>
<section class="two is-clone">
<h1>Two</h1>
</section>
</main>I know this code is not 100% functional yet, but I think it can lead us to a better answer.
我知道这段代码还不是 100% 可用，但我认为它可以引导我们找到更好的答案。
