CODEWITHSUNDEEP
javascriptcss
kevmc
kevmc

Reputation: 1294

100 percent height on body and html tags causes scroll issue

I have noticed some unexpected (by me anyway) behavior when the following css is used:

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

When the page has more height than the screen, vertical scrollbars appear as expected and the scroll event is detectable on the body element (rather than the window). The trouble is that the window.pageOffsetY property is no longer reflecting the scrolled position. This is also affecting the pageY property of mouse events.

I have set up a fiddle http://jsfiddle.net/kevmc/n2sJB/ where you can see this in action.

Only when both body and html tags have the above styles does the problem arise. I know the simple answer is don't use those styles, but I am trying to write a javascript component that I can use on many sites where I do not always have control over the stylesheet.

So my question is how can I measure the scroll position when the above styles are in place?

Upvotes: 1

Views: 1661

Answers (2)

Yahya
Yahya

Reputation: 1

I've used $('body').height($('body').height() + 1);.

Upvotes: 0

Gromo
Gromo

Reputation: 1609

As you have set height:100% for both html and body elements, body become scrollable (not html/window as it was before), so you should check scroll offset of body element: jQuery('body').scrollTop(); or try solution without jQuery from Engineer

Upvotes: 1

Related Questions