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

Question

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

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

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

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

Answer 1

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

$(window).on('scroll', function() {
   $(this).scrollTop();
});

Answer 2

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

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

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

CSS3 transforms causing very strange window.scrollY behavior