想要pageYoffset

Question

我需要知道一件事，肯定你必须解决，因为不成功。

我想以500px滚动，例如左侧出现一个元素div。好的HTML / CSS结构没问题！但是对于JS humm来说没有用。

你可以看到这个例子：

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)";
    }

})

当页面是＆gt; 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>