ホームページ ウェブフロントエンド jsチュートリアル scrollLeft、scrollTop ブラウザ互換性 test_javascript スキルについて

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

May 16, 2016 pm 05:40 PM
互換性がある

今日、元のグループのポップアップ ウィンドウを修正したところ、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 を取得することもできます。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Win10 の最も安定したバージョン Win10 の最も安定したバージョン Dec 25, 2023 pm 07:58 PM

Win10 の最も安定したバージョン

Win11はダイナミック壁紙をサポートしていますか? Win11はダイナミック壁紙をサポートしていますか? Jan 01, 2024 pm 06:41 PM

Win11はダイナミック壁紙をサポートしていますか?

Switch2はSwitchカートリッジと互換性がありますか? Switch2はSwitchカートリッジと互換性がありますか? Jan 28, 2024 am 09:06 AM

Switch2はSwitchカートリッジと互換性がありますか?

win7と互換性のあるwin10の設定方法の紹介 win7と互換性のあるwin10の設定方法の紹介 Jan 03, 2024 pm 05:09 PM

win7と互換性のあるwin10の設定方法の紹介

Minw でコンパイルされたプログラムは Linux システム上で正常に実行できますか? Minw でコンパイルされたプログラムは Linux システム上で正常に実行できますか? Mar 19, 2024 pm 12:03 PM

Minw でコンパイルされたプログラムは Linux システム上で正常に実行できますか?

Eclipse バージョンの非互換性に対処する方法 Eclipse バージョンの非互換性に対処する方法 Jan 04, 2024 am 10:29 AM

Eclipse バージョンの非互換性に対処する方法

d3dx9_43.dll の非互換性を解決する方法 d3dx9_43.dll の非互換性を解決する方法 Feb 24, 2024 pm 10:06 PM

d3dx9_43.dll の非互換性を解決する方法

win10システムとps版の互換性を紹介 win10システムとps版の互換性を紹介 Dec 30, 2023 pm 06:04 PM

win10システムとps版の互換性を紹介

See all articles