Question

我很困惑，我一直在尝试使用onscroll函数来获取scrollTop的值。在onload函数中，它可以正常工作并向控制台返回0，但是对于onscroll我什么也没得到。在codepen（https://codepen.io/dillonbrannick/pen/LqvzeR）中对其进行了尝试，并且控制台完全返回了应有的状态，不确定为什么在我的网页上，控制台没有为完全相同的功能返回任何内容。

相关功能：

window.onscroll = function() {
    var y = document.documentElement.scrollTop;

    console.log(y);
};

正如泰勒（Tyler）在评论中指出的那样，问题是由于视差效应引起的，因此我更新了问题以反映这一点。视差效果是根据Keith Clark的视差代码（https://keithclark.co.uk/articles/pure-css-parallax-websites）建立的。

window.onscroll = function() {
    var y = document.documentElement.scrollTop;

    console.log(y);
};

body{
height:100%;
  margin: 0px 0 0px 0;
	overflow:hidden;
}
.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
  transform-origin-x: 100%;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin-x: 100%;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back_01 {
  transform: translateZ(-5px) scale(8);
}

.bg {
  position:relative;
  left:100px;
  top:200px;
height:100px;
width:100px;
background-color:red;
}
p {
  background-color:blue;
  height:250px;
  color:white;
}
.wrapper {
  position:relative;
	width:80%;
	max-width:960px;
	margin:0 auto 0 auto;
	height: auto;
	overflow:hidden;
}
.more{
  margin-top:200px;
    position:relative;
    
}

<body>
  <div class="parallax">
    <div class="parallax__layer parallax__layer--back_01">
      <div class="bg"></div>
    </div>
    <div class="parallax__layer parallax__layer--base">
      <div class="wrapper">
        <p>content</p>
        <p class="more">More</p>
      </div>
    </div>
  </div>
</body>

谢谢

Answer 1

您的页面实现了一个容纳内容的容器元素（<div class="parallax">）。该元素是向上滚动和向下滚动的元素，而不是window本身。

document.querySelector('.parallax').addEventListener('scroll', function() {
  console.log(this.scrollTop);
});

body{
height:100%;
  margin: 0px 0 0px 0;
	overflow:hidden;
}
.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
  transform-origin-x: 100%;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin-x: 100%;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back_01 {
  transform: translateZ(-5px) scale(8);
}

.bg {
  position:relative;
  left:100px;
  top:200px;
height:100px;
width:100px;
background-color:red;
}
p {
  background-color:blue;
  height:250px;
  color:white;
}
.wrapper {
  position:relative;
	width:80%;
	max-width:960px;
	margin:0 auto 0 auto;
	height: auto;
	overflow:hidden;
}
.more{
  margin-top:200px;
    position:relative;
    
}

<body>
  <div class="parallax">
    <div class="parallax__layer parallax__layer--back_01">
      <div class="bg"></div>
    </div>
    <div class="parallax__layer parallax__layer--base">
      <div class="wrapper">
        <p>content</p>
        <p class="more">More</p>
      </div>
    </div>
  </div>
</body>

window.onscroll无法使用视差效果

1 个答案: