javascript - body 和 html 标签的 100% 高度会导致滚动问题

Question

当使用以下 css 时，我注意到一些意想不到的(无论如何是我)行为:

body, html{height:100%; overflow-x:hidden}

当页面的高度高于屏幕时，垂直滚动条会按预期出现，并且可以在 body 元素(而不是窗口)上检测到滚动事件。问题在于 window.pageOffsetY 属性不再反射(reflect)滚动位置。这也会影响鼠标事件的 pageY 属性。

我已经设置了一个 fiddle http://jsfiddle.net/kevmc/n2sJB/您可以在其中看到这一点。

只有当body和html标签都具有上述样式时，问题才会出现。我知道简单的答案是不要使用这些样式，但我正在尝试编写一个 javascript 组件，我可以在许多我并不总是能够控制样式表的网站上使用它。

所以我的问题是当上述样式就位时如何测量滚动位置？

Answer 1

因为你已经为 html 和 body 元素设置了 height:100%，body 变得可滚动(不像以前的 html/window)，所以你应该检查 body 元素的滚动偏移:jQuery('body').scrollTop(); 或尝试 solution without jQuery from Engineer