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

I'm using some newer CSS on a Wordpress site I'm building, including vh to make sections the height of the viewport, and transform-z for parallax scrolling effects.

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

I noticed that although the page scrolls normally, no matter where I am on the page window.scrollY or $(window).scrollTop() will return 0. That is, unless I try to scroll beyond the boundaries of the page, in which case it does begin to return real values (elastic scrolling on a Mac).

我注意到虽然页面滚动正常，但无论我在页面上的哪个窗口.scrollY或$（窗口）.scrollTop（）都将返回0.即使我尝试滚动超出页面的边界，其中它确实开始返回实际值（在Mac上弹性滚动）。

In fact, an event listener for $(window).scroll() doesn't even fire until I hit the page boundaries.

事实上，$（window）.scroll（）的事件监听器甚至在我点击页面边界之前都不会触发。

Has anyone else encountered anything like this? I don't even know where to begin debugging this... I am currently logging $(window).scrollTop() to the console on scroll to illuminate the problem.

还有其他人遇到过这样的事吗？我甚至不知道从哪里开始调试这个...我正在将$（window）.scrollTop（）记录到控制台滚动以解决问题。

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

2 个解决方案

#1

I think that you should remove the main's overflow statement, and move it to sections.

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

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

Then your event will fire, and you'll be able to change each section's scrollTop via js.

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

2 个解决方案

#1

更多相关文章

随机推荐