我在文档主体上设置了滚动事件侦听器,以向上或向下转换100vh。这在第一次向下滚动100vh时似乎效果很好,我也可以向上滚动100vh到起点。如果我想向下滚动不止一次,它似乎不起作用。我的标记在某些地方是错误的,但是对于javascript来说还很陌生,我正努力查看我哪里出错了。
document.addEventListener('scroll', function() {
var previousScrollPos = 0;
var currentScrollPos = window.pageYOffset;
var nextScrollPos = 0;
if (currentScrollPos > previousScrollPos) {
nextScrollPos = nextScrollPos - 100;
document.body.style.transform = "translateY(" + nextScrollPos + "vh)";
} else {
nextScrollPos = nextScrollPos + 100;
document.body.style.transform = "translateY(" + previousScrollPos + "vh)";
}
});
body {
width: 100%;
height: 100%;
transition: all 1s;
color: black;
}
.section {
height: 100vh;
text-align: center;
line-height: 100vh;
}
.section1 {
background-color: white;
}
.section2 {
background-color: green;
}
.section3 {
background-color: red;
}
.section4 {
background-color: yellow;
}
<div class="section section1">1</div>
<div class="section section2">2</div>
<div class="section section3">3</div>
<div class="section section4">4</div>