Javascript滚动事件侦听器仅向下滚动一次

时间:2019-02-23 22:24:13

标签: javascript

我在文档主体上设置了滚动事件侦听器,以向上或向下转换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>

0 个答案:

没有答案