FireFox ブラウザと Chrome ブラウザの間のページ スクロール値scrollTop 間の互換性の問題の詳細な説明

document.body.scrollTop element.getBoundingClientRect().top;

ちなみに、getBoundingClientRect().top で取得した要素がスクロールによって非表示になっている場合とスクロールされていない場合の違いは次のとおりです。

上の図からわかるように、スクロールされる要素がブラウザの境界の外側にある場合でも、取得されるトップは負の数であり、計算されたページの高さは依然として正しいです。

クリックでディレクトリジャンプ機能が完成し、今のところ完璧です。

FireFox と Chrome のスクロールトップ間の互換性の問題

今日 FireFox をテストしていたら、Firefox でのページスクロールのジャンプ機能が使えないことが分かりました。

1. ネイティブインターフェーステスト

最初に言っておきます:

document.documentElement は 要素であり、document.body は 要素です。

テスト結果によると、Firefox ではページ スクロールの高さは html 要素を通じてのみ取得および設定できますが、Google では body 要素を通じてのみ取得および設定できます。

2. jQuery インターフェースのテスト

上記はネイティブのscrollTop属性を使用して取得および設定しており、jquery自体もscrollTop属性のカプセル化を実装しています。その互換性を試すことができます。

$(document) を使用して、scrollTop の取得と設定との互換性を実現できることがわかり、とてもうれしく思います。

3. スクロールトップアニメーション実装テスト

互換性は確保されていますが、より良い結果を達成するために、直接ジャンプするのではなく、アニメーションを使用してページ上の特定の位置までスクロールしたいと考えています。これは、jquery の animate 関数を使用して実現されます。

調べてみたところ、$(document)で取得と設定は実現できますが、アニメーション効果は使えず、body要素とhtml要素でしか実現できないことが分かりました。

最終解決策

最も完璧な実装計画は次のとおりです:

現在のページのスクロールの高さを取得または直接設定します:

アニメーション効果を使用して現在のページのスクロールの高さを設定します:

この記事の上部にあるディレクトリ リンクをクリックすると、最終的な効果を確認できます:

jQuery CSS 操作 -scrollTop() メソッド

例