web-dev-qa-db-ja.com

ウィンドウのスクロールイベントが機能しないのはなぜですか？

Window 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

問題は何ですか？

javascripteventsonscroll
5
Lion King

あなたは何か面白いことを言った：

xは0に変更され、そのままです。

コードで発生する可能性がある唯一の方法は、HTMLがxを設定しているために、onscroll関数ブロックが変更を加えた場合です。

window.onscroll = function()が実際に起動しているのに、正しいスクロール位置（つまり、0）が得られない場合は、スクロール位置が返される方法を変更してみてください。

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

そうだと分かった document.documentElement.scrollTopChromeでは常に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>
10
Drakes

この質問には回答しましたが、onscrollが機能しない状況の詳細を含めたいと思いました。

組み込みのウ​​ィンドウスクロールバーをオーバーライドする独自のスクロールバーを持つデータコンテナがあります。 chrome developer。私の外側のタグは次のようになりました。

これにより、左側に2つのスクロールバーが表示されました。これは、プロパティoverflow：autoがデータコンテナに別のスクロールバーを作成するように指示していたためです。

オーバーフロー：自動を削除すると、onscrollイベントを正しくヒットできるようになりました。

0
Bryan Harrington

私にとって、ステートメントdocument.body.scrollTop;はChromeとOperaでうまく機能しますが、Firefoxでは0を返します。

逆にステートメントdocument.documentElement.scrollTop; Firefoxでは正常に動作しますが、ChromeおよびOpera.。

多分 document.body.scrollTop;はFFによって十分にサポートされていません

可能な解決策：

私は試した：

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

そして

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

どちらも上記のすべてのブラウザでうまく機能します。

0
willy wonka