正如您在这里看到的,我有两个部分占据了整个页面。 我想在滚动时检测,如果第二部分可见 20%,如果可见,则强制它平滑滚动并锁定该部分,以便占用整个空间。如果添加更多,与其他部分相同。
(我自己能做的顺利的部分)。
有人知道我怎么能做那样的事情吗?
* {
margin: 0;
padding: 0;
}
#s1 {
height: 100vh;
background: red;
}
#s2 {
height: 100vh;
background: blue;
}
<section id="s1"></section>
<section id="s2"></section>
最佳答案
var section = document.querySelector('section'),
sectionHeight = section.offsetHeight,
lastScrollTop = 0;
document.addEventListener("scroll", function() {
var scrollY = window.pageYOffset || document.documentElement.scrollTop;
if (scrollY > lastScrollTop) { //on scroll down
if (scrollY >= sectionHeight * 0.2 && scrollY < sectionHeight) { //if 20% of section2 is visible
window.scrollTo(0, sectionHeight * 1); //scroll to section2
} else if (scrollY >= sectionHeight * 1.2 && scrollY < 2 * sectionHeight) { //if 20% of section3 is visible
window.scrollTo(0, sectionHeight * 2); //scroll to section3
} else if (scrollY >= sectionHeight * 2.2) { //if 20% of section4 is visible
window.scrollTo(0, sectionHeight * 3); //scroll to section4
}
}
lastScrollTop = scrollY <= 0 ? 0 : scrollY;
});
* {
margin: 0;
padding: 0;
}
html,body{
scroll-behavior: smooth;
}
section{
height: 100vh;
}
#s1 {
background: red;
}
#s2 {
background: blue;
}
#s3{
background: yellow;
}
#s4{
background:purple;
}
<section id="s1"></section>
<section id="s2"></section>
<section id="s3"></section>
<section id="s4"></section>
关于javascript - 如何检测 "<section>"的 20% 是否可见?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55223379/