web-dev-qa-db-ja.com

document.body.scrollTop Firefoxは0を返します：JSのみ

純粋なjavascriptの選択肢はありますか？

以下はオペラ、chromeおよびsafariで動作します。 Explorerでまだテストしていない：

http://monkey-me.herokuapp.com

https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js

ページの読み込み時に、div '.content'まで下にスクロールする必要があります。

var destiny = document.getElementsByClassName('content');
var destinyY = destiny[0].offsetTop;
scrollTo(document.body, destinyY, 200);

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 2;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
};
javascriptfirefoxcross-browser
65
Al Ex Tsm

これを使用してみてください：document.documentElement.scrollTop。私が正しければdocument.body.scrollTopは非推奨です。

更新

@Nikolai Mavrenkovがコメントで示唆しているように、Chromeは答えと一緒に再生されず、安全に使用できるようです。

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

これで、すべてのブラウザがカバーされるはずです。

138
Michelangelo

IF条件を使用する代わりに、この論理式のようなものを使用して適切な結果を取得する簡単な方法があります。

var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

両方の部分はデフォルトでゼロを返すので、スクロールがゼロの位置にあるとき、期待どおりにゼロを返します。

bodyScrollTop = 0 || 0 = 0

ページスクロールでは、これらの部分の1つがゼロを返し、別の部分がゼロより大きい数値を返します。ゼロ化された値はfalseに評価され、論理または||は結果として別の値を取ります（例：予想されるscrollTopは =）。

Firefoxのようなブラウザでは、この式が次のように表示されます

bodyScrollTop = 300 || 0 = 300

残りのブラウザは

bodyScrollTop = 0 || 300 = 300

再び同じ正しい結果が得られます。

実際、それはすべてsomething || nothing = somethingについてです:)

40
Wh1T3h4Ck5

標準はdocument.documentElementであり、これはFFとIEで使用されます。

WebKitはdocument.bodyを使用しており、標準に変更した場合、下位互換性に関する不満のために標準を使用できませんでした。

https://miketaylr.com/posts/2014/11/document-body-scrolltop.html

WebKitが現在サポートしているドキュメントに新しいプロパティがあります

https://developer.mozilla.org/en/docs/Web/API/document/scrollingElement

これにより、適切な要素が表示されます

var scrollingElement = document.scrollingElement || document.documentElement;
scrollingElement.scrollTop = 100;

ポリフィルもあります

https://github.com/mathiasbynens/document.scrollingElement

19
Anthony Johnston