为什么窗口onscroll事件不起作用？

Question

我想执行窗口onscroll事件,但我不知道为什么它不适用于所有浏览器(firefox,chrome等),并且没有发生错误.

完整代码:

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>

还有jsfiddle:http: //jsfiddle.net/sqo0140j

问题是什么 ？

Answer 1

你说了一些有趣的话:

x更改为0并保持原样.

代码中唯一可能发生的方法是,如果onscroll功能块因为HTML设置x而进行更改.

如果您window.onscroll = function()确实正在开火,但是您没有获得正确的滚动位置(即0),请尝试更改滚动位置的返回方式:

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

我发现document.documentElement.scrollTop在Chrome上总是返回0.这是因为WebKit body用于跟踪滚动,但Firefox和IE使用html.

请尝试更新的代码段:

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>