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

最近、ディレクトリ機能を含むプロジェクトに取り組んでいたのですが、最近のブラウザとの違い、つまりページのスクロール値(scrollTop)の取得と設定にバグ、いわゆる差異があることが分かりました。

その前に、ページ要素の座標取得について説明します。この図の古典性については改めて説明する必要はありません。

特定の位置へのスクロール機能を実装します

ブログ ディレクトリの最も重要な機能の 1 つは、タイトルをクリックしてページをスクロールすることです。ページ上の特定のタイトルまでスクロールしたいため、スクロール要素の特定の絶対位置を計算する必要があります。一般的に使用される offsetTop は現在の要素を取得するために使用されます。位置を決定する最も近い要素のオフセットはここでは適用されません。

ここでは、ブラウザによってネイティブに提供される getBoundingClientRect インターフェイスを使用する必要があります。この関数は、位置の種類に関係なく、ブラウザの各余白から要素の絶対位置を返します。これは、ページのスクロール効果を作成するのに非常に適しています。

getBoundingClientRect 関数の具体的な使用方法については、リンク 1、リンク 2 を参照してください。

スクロールに必要なデータを取得します。bodyのscrollTopはスクロールによってページが隠れた高さであり、上記のインターフェースに従って要素とブラウザの上部の間の距離を取得します。必要なスクロールの高さを計算できます。関係図は次のとおりです。

ページがスクロールされる位置は次のとおりです:

コードをコピーします コードは次のとおりです:

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

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

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

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

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

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

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

最初に言っておきます:

document.documentElement は 100db36a723c770d327fc0aef2ce13b1 要素であり、document.body は 6c04bd5ca3fcae76e30b72ad730ca86d 要素です。

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

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

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

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

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

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

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

最終解決策

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

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

$(document).scrollTop();//获取，兼容火狐谷歌 

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

$("body,html").animate({ scrollTop: ... });//动画滚动效果，兼容火狐谷歌 

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

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

例

要素でスクロール バーの垂直オフセットを設定します:

$(".btn1").click(function(){
 $("div").scrollLeft(100);
});

定義と使用法

scrollTop() メソッドは、一致する要素のスクロール バーの垂直位置を返すか、設定します。

スクロール トップ オフセットは、スクロール バーの上部に対する相対的なオフセットを指します。
このメソッドがパラメータを設定しない場合、スクロール バーの上部からのオフセットをピクセル単位で返します。

文法

$(selector).scrollTop(offset)

参数	描述
offset	可选。规定相对滚动条顶部的偏移，以像素计。

ヒントとメモ

注: このメソッドは、表示要素と非表示要素の両方に有効です。
注: 値を取得するためにこのメソッドを使用すると、最初に一致した要素のスクロール上部のオフセットのみが返されます。
注: このメソッドを使用して値を設定すると、一致するすべての要素のスクロール上部のオフセットが設定されます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。