Why window onscroll event does not work?

问题

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 ?

回答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>

回答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.

回答3:

This question has been answered, but I wanted to include details of my situation that prevent onscroll from working.

I have datacontainer that had its own scroll bar which overrides the built in window scroll bar. I didnt notice this until I started giving a more thorough look at the elements on the page using chrome developer. My outer tag looked like this,

This caused two scroll bars to appear on the left. This was because the property, overflow:auto, was telling the data container to make another scroll bar.

Once I removed the overflow:auto I could now correct hit the onscroll event.

来源：https://stackoverflow.com/questions/29718833/why-window-onscroll-event-does-not-work

标签

javascript

events

onscroll