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

CSS3 transforms causing very strange window.scrollY behavior

本文关键字：window scrollY 行为 转换 非常 CSS3      更新时间：2023-09-26

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

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

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

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

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

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

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

然后，您的事件将启动，您可以通过js更改每个部分的scrollTop。

您是否尝试过将$(window).scrollTop()封装在.on()方法中？

$(window).on('scroll', function() {
   $(this).scrollTop();
});
相关文章：