Why window onscroll event does not work?

Question

I want to execute the window onscroll event, but I don't know why it doesn't work on all browsers(firefox, chrome, etc), and there is no errors occurred.

Full code:

var elem = document.getElementById('repeat');
var show = document.getElementById('show');

for (i = 1; i <= 300; i++) {
    elem.innerHTML += i + "<br/>";
}


window.onscroll = function () {
    show.innerHTML = document.body.scrollTop;
};

#show {
    display:block;
    position:fixed;
    top:0px;
    left:300px;
}

<pre id="repeat"></pre>

<div style="position:relative;">
    <div id="show">x</div>
</div>

Also jsfiddle: http://jsfiddle.net/sqo0140j

What is the problem ?

Answer 1

You said something interesting:

x changed to 0 and remains as is.

The only way in your code that can happen is if the onscroll function block makes a change because your HTML sets x.

If your window.onscroll = function() is indeed firing, but you are not getting the right scroll position (i.e. 0), try changing the way the scroll position is returned:

window.onscroll = function () {
    show.innerHTML = document.documentElement.scrollTop || document.body.scrollTop;
};

I found out that document.documentElement.scrollTop always returns 0 on Chrome. This is because WebKit uses body for keeping track of scrolling, but Firefox and IE use html.

Please try your updated snippet:

var elem = document.getElementById('repeat');
var show = document.getElementById('show');

for (i = 1; i <= 300; i++) {
    elem.innerHTML += i + "<br/>";
}


window.onscroll = function () {
    show.innerHTML = document.documentElement.scrollTop || document.body.scrollTop;
};

#show {
    display:block;
    position:fixed;
    top:0px;
    left:300px;
}

<pre id="repeat"></pre>

<div style="position:relative;">
    <div id="show">x</div>
</div>

Answer 2

For me the statement document.body.scrollTop; works well in Chrome and Opera, but on Firefox returns 0.

Viceversa the statement document.documentElement.scrollTop; works good on Firefox but not in Chrome and Opera...

Maybe document.body.scrollTop; is not well supported by FF

Possible Solutions:

I tried:

Math.max(document.body.scrollTop, document.documentElement.scrollTop);

and

 document.body.scrollTop || document.documentElement.scrollTop;

They both works well on all above browsers.

Answer 3

I had also the same problem , but I didn't know the proper reason for that . In my case

window.onscroll = function () {
   console.log(document.documentElement.scrollTop || document.body.scrollTop);
 };

this code didn't work even after removing margin:0; and padding:0; . But by mention the addEventListener on the document.body it is worked

document.body.addEventListener('scroll',()=>{
  console.log(document.documentElement.scrollTop || document.body.scrollTop);
})