scrollLeft、scrollTop ブラウザ互換性 test_javascript スキルについて

WBOY
リリース: 2016-05-16 17:40:03
オリジナル
1388 人が閲覧しました

今日、元のグループのポップアップ ウィンドウを修正したところ、Google Chrome でのポップアップ ウィンドウの位置が他のブラウザでの位置と異なることがわかりました。これは、scrollTop の値が欠落しているためだと考えられます。ソースコードを見ると、

document.documentElement.scrollTop が直接使用されていることがわかりましたが、Chrome ではこの値は 0 です。

ドキュメントがある場合標準ブラウザは document.documentElement.scrollTop を認識しますが、chrome と safari はこれを認識しません。 chrome は document.body .scrollTop を渡し、値を取得します。

この問題を解決します。document.body と document.documentElement は異なる状況下で使用されるため、ブラウザ カテゴリを決定するのにそれほど苦労する必要はありません。別の値を取得する可能性があります。この問題は簡単に解決できます。
ブラウザまたは特定の div のスクロールトップまたはスクロールレフトを取得するときに、次のメソッドをカプセル化しました。

コードは次のとおりです:

var ueScroll=(function(){
//GetscrollX
functionscrollX(ele){
var element=ele || document .body;
return element.scrollLeft || (document.documentElement && document.documentElement.scrollLeft); //scrollY
関数を取得){
var element= ele || document.body;
return element.scrollTop || (document.documentElement && document.documentElement.scrollTop);
return {
left: scrollX,
top:scrollY
}
})()


デモでは、各ブラウザは非常に便利で簡単な方法でscrollTopとscrollLeftの値を取得します。 .
これは、後で dom オブジェクトが渡される限り、textarea または div で直接使用して、scrollTop とscrollLeft を取得することもできます。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート