After implementing the CSS code below, I have encountered some unexpected behavior:
body, html{height:100%; overflow-x:hidden}
Despite vertical scrollbars appearing as intended when the page exceeds screen height, detecting the scroll event on the body element is causing issues. The window.pageOffsetY property no longer accurately reflects the scrolled position, impacting the pageY property of mouse events as well.
To see this problem in action, check out my fiddle http://jsfiddle.net/kevmc/n2sJB/.
The issue only arises when both body and html tags are styled with the mentioned properties. While a simple solution would be to avoid using these styles altogether, I am developing a javascript component meant for various websites where I may not have control over the stylesheet.
My question now is how can I accurately measure the scroll position while maintaining the above CSS styles?