document.body.scrollTop is always 0 in IE even when scrolling

Question

I am displaying the value of document.body.scrollTop in the status bar while moving the mouse. The value is always 0 in IE. Why is always 0? Is there another way to get how much the scroll bar has moved?

I upvoted the selected answer since no one else seemed to have done it ( unless there was a downvote to counter it ). It would have been nice if you had responded to Nick's question. — meder omuraliev, Jul 29 '10 at 16:28

score 115 · Accepted Answer · edited Aug 16 '12 at 03:40

115

You may want to try this for an older doctype in IE:

var top = (document.documentElement && document.documentElement.scrollTop) || 
              document.body.scrollTop;

edited Aug 16 '12 at 03:40

AlbertEngelB

16,016
15
66
93

answered Apr 26 '10 at 22:09

Nick Craver

623,446
136
1,297
1,155

1

Wouldn't that bomb if `document.documentElement` is undefined? I think you meant `document.documentElement` instead of `document.documentElement.scrollTop` in the first part of the ternary expression. :) – Vivin Paliath Apr 26 '10 at 22:11
@Vivin - It's not undefined, the scroll property just isn't set, resulting in 0/false. – Nick Craver Apr 26 '10 at 22:13
2

This can be abbreviated to `var top = document.documentElement.scrollTop || document.body.scrollTop;` – Web_Designer Apr 28 '12 at 00:49
12

You thought you could do a simple || operation? Chuck Testa. If you try to access the documentElement's property .scrollTop, it will blow. Best (read: non-explosive) solution: `var top = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;` – AlbertEngelB Aug 16 '12 at 03:33
1

Be careful using document.documentElement.scrollTop in iOS. It will always report 0. If you need to actually test for scrollTop==0 then this switch won't work. – Jason Feb 05 '14 at 02:39
There's also now `document.scrollingElement`. I'm using the result of `document.scrollingElement || document.documentElement`, at least until I find somewhere that doesn't work. – tremby Mar 19 '16 at 02:59
This fixes the problem in Safari too, having the same issue there, document.documentElement.scrollTop always reports 0 – Carlos Dec 08 '17 at 12:32

ijavid · Answer 2 · 2012-06-19T13:57:36.390

16

this function provides a cross-browser implementation of reading the scroll offset:

function posTop() {
            return typeof window.pageYOffset != 'undefined' ? window.pageYOffset: document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop? document.body.scrollTop:0;
        }

edited Jun 19 '12 at 13:57

answered Jun 19 '12 at 13:40

ijavid

715
12
23

Thanks, this is the only answer that works in both older versions of IE as newest version of Chrome. – Kamelkent Jun 24 '15 at 08:01

Vivin Paliath · Answer 3 · 2010-04-26T22:17:18.413

Depending on the DOCTYPE, you would have to use document.body.scrollTop or document.documentElement.scrollTop. Have you tried the second one?

You can do something like this:

var scrollTop = document.documentElement ? document.documentElement.scrollTop :
                                           document.body.scrollTop;

I ran into these links while researching your problem:

Window size and scrolling (towards the bottom)
document.body.scrollTop in IE

This may help you out a little more.

document.body.scrollTop is always 0 in IE even when scrolling

3 Answers3

Linked

Related