javascript - 想pageYoffset

Question

我需要知道一件事，并且确定您必须解决问题，因为这不是成功。

我想以 500px 滚动，例如元素 div 出现在左侧。好的 HTML/CSS 结构没问题!但是对于 JS 嗡嗡声不起作用。!

你可以看到这个例子:

HTML:

<div class="left"></div>

CSS:

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  height: 200vh;
}

.left {
  width: 300px;
  height: 300px;
  background-color: red;
  position: absolute;
  top: 150%;
  transform: translateX(-300px);
  transition: 1s;
}

JavaScript:

var divLis = document.querySelector(".left");

window.addEventListener("scroll", function (e) {

    if(window.pageYOffset > 500) {
        console.log(window.pageYOffset)
        divLis.style.transform = "translateX(0)";
    }

})

当页面 > 500px 时，元素出现。但对我来说不行，我想 == 500px 你有适合我的解决方案吗？

请:不要使用 JQuery

Answer 1

您可以使用 window.scrollY 或 document.body.scrollTop

var divLis = document.querySelector(".left");

window.addEventListener("scroll", function(e) {
  var scrollTop = document.body.scrollTop;
  //var scrollTop = window.scrollY;
  //console.log(scrollTop);
  if (scrollTop > 500) {
    divLis.style.transform = "translateX(0)";
  }
});

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  height: 500vh;
}

.left {
  width: 300px;
  height: 300px;
  background-color: red;
  position: absolute;
  top: 150%;
  transform: translateX(-300px);
  transition: 1s;
}

<div class="left">left</div>