javascript - CSS3 转换导致非常奇怪的 window.scrollY 行为

Question

我在我正在构建的 Wordpress 网站上使用了一些较新的 CSS，包括 vh 使部分成为视口(viewport)的高度，以及 transform-z 用于视差滚动效果。

我注意到虽然页面正常滚动，但是无论我在页面的哪个位置 window.scrollY 或 $(window).scrollTop() 都会返回 0。也就是说，除非我尝试滚动到页面边界之外，在这种情况下它会开始返回实际值(在 Mac 上是 flex 滚动)。

事实上，$(window).scroll() 的事件监听器甚至在我到达页面边界之前都不会触发。

有没有人遇到过这样的事情？我什至不知道从哪里开始调试这个...我目前正在将 $(window).scrollTop() 记录到滚动控制台以说明问题。

http://dev.nickforddesign.com/resonator/category/portfolio/

Answer 1

我认为您应该删除 main 的溢出语句，并将其移至部分。

section { 
    overflow: hidden;
}
main {
    perspective: 1px;
    height: 100vh;
}

然后您的事件将触发，您将能够通过 js 更改每个部分的 scrollTop。