ホームページ ウェブフロントエンド 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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++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 バージョンを見つける必要があります。全体的に非常に使いやすく、毎日の使用がスムーズになります。史上最も安定したWin10バージョン 1. Win10純正のオリジナルシステム. ユーザーは簡単な操作を使用できます. システムは最適化されており、強力な安定性、セキュリティと互換性を備えています. ユーザーは手順に従って完璧なマシンを達成できます. 2. ロシアのマスター合理化 win10 のバージョンは厳密に合理化され、多くの不要な機能やサービスが削除されました。合理化後は、システムの CPU とメモリの使用量が減り、動作が速くなります。 3. Win10 Lite Edition 1909 は、異なるハードウェア モデルの複数のコンピューターにインストールされています。

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

Switch2はGamescom 2023で任天堂から発表された新モデルですが、一部のプレイヤーは新モデルと以前のバージョンのカートリッジの間に互換性の問題があるのではないかと心配しています。 switch2 はスイッチ カセットと互換性がありますか? 回答: switch2 はスイッチ カセットと互換性がありません。 Switch 2 カートリッジの紹介 任天堂の生産チェーン会社からの情報によると、Switch 2 は 64GB カートリッジを使用する可能性があります。パフォーマンスが向上し、より多くの 3A ゲームの名作をサポートするため、より大きなカートリッジ容量が必要になります。なぜなら、多くのゲーム作品は、ゲームカートリッジに詰める前に去勢して圧縮する必要があるからです。さらに、Switch のカートリッジはゲーム コンテンツをコピーする傾向があるため、新しいカートリッジに交換してください。

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

ご存知のとおり、win11 の主な機能は独自の Android サブシステムであり、エミュレータを使用せずに Android ソフトウェアをインストールできますが、win11 Android アプリケーションの遅延の問題もあります。 win11 はダイナミック壁紙に対応していませんか? 回答: Win11 はダイナミック壁紙に対応していますが、使用できない場合は、ソフトウェアまたはシステムのバージョンが遅れている可能性があります。更新されたばかりの場合は、システムの壁紙で覆われている可能性があります。 1. システムまたはソフトウェアのバージョンが遅れている場合は、システムとダイナミック壁紙ソフトウェアを更新してください。 2. システムの壁紙で覆われている場合は、「設定」を開いてみてください。 3. 次に、「個人用設定」で「背景」設定を入力します。 4. 次に、パーソナライズされた背景を「写真」に変更します。 5. 変更が完了したら、通常どおりダイナミック壁紙を設定できます。

Linux システムは Android ソフトウェアと互換性がありますか? Linux システムは Android ソフトウェアと互換性がありますか? Mar 20, 2024 pm 02:27 PM

近年、モバイル機器分野におけるAndroidシステムの普及が急速に進んでおり、Androidアプリケーションが他のプラットフォームでも動作するかどうかに多くの人が注目し始めています。 Linux は一般的なオペレーティング システムとして多くの人に好まれていますが、問題は、Linux システムは Android ソフトウェアと互換性があるのか​​ということです。まず明確にしておきたいのは、Linux システムと Android システムはカーネルに類似点があるということです。どちらも Linux カーネルをベースにしたオペレーティング システムです。したがって、理論的には、Linux システムは実行できます。

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

d3dx9_43.dll の非互換性を解決する方法. 近年、コンピューターやゲームの急速な発展により、私たちはより多くのエンターテイメントと利便性を享受できるようになりました。ただし、特定のプログラムをインストールまたは実行すると、「d3dx9_43.dll には互換性がありません」などのエラー メッセージが表示されることがあります。この場合、どうやってこの問題を解決すればよいのでしょうか?まず、このエラー メッセージの意味を理解しましょう。 d3dx9_43.dll は、オペレーティング システムで使用される DirectX のシステム ファイルです。

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

多くの友人が未だに win10 システムではなく win7 システムを選択している理由は、互換性の悪さを恐れているからです。実はwin10でもwin7の互換モードを設定できるようになりましたので、プロパティで設定を変更するだけでOKですので、一緒に見ていきましょう。 win10 を win71 と互換性を持たせるにはどうすればよいですか? まず、win7 システムで実行する必要があるプログラムを右クリックし、「プロパティ」2 を開き、上の「互換性」をクリックして互換性タブに入ります。 3. 互換モードで「互換モードでこのプログラムを実行する」にチェックを入れます。 4. 次に、下のドロップダウン メニューから「Windows 7」を選択します。 5. 完了したら、「適用」をクリックするか、「OK」をクリックします。

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

互換性のないバージョンの Eclipse が見つかった場合はどうすればよいですか? [はじめに] Eclipse は、人気のある開発ツールとして、強力な機能と豊富なプラグインを提供するだけでなく、クロスプラットフォーム機能も備えています。ただし、Eclipse を使用すると、バージョンの非互換性の問題が発生し、プログラムが適切に実行されなかったり、コンパイル エラーが発生したりすることがあります。この記事では、Eclipse バージョンの非互換性に対処する方法を説明し、一般的な互換性の問題を解決するためのコード例をいくつか示します。 【解決策】Eclをアップデートする

Win11 で互換性のあるネットワーク ポイントをインストールおよび構成するための詳細ガイド Win11 で互換性のあるネットワーク ポイントをインストールおよび構成するための詳細ガイド Jan 09, 2024 pm 02:50 PM

閲覧するときに古いバージョンのブラウザを使用する必要がある Web サイト ユーザーが多く、新しいバージョンを使用するには互換性のあるアウトレットを追加する必要があるため、今日は win11 で互換性のあるアウトレットを追加するための詳細なチュートリアルをお届けします。そして学びなさい。 win11 で互換性のあるコンセントを追加する方法 1. まずシステムで IE ブラウザを開き、ブラウザの右上隅にある小さな歯車をクリックして「設定」に入ります。 2. 次に、開いた設定メニューで「互換表示設定」を開きます。 3. 「この Web サイトを追加する」の編集ボックスに追加する URL を入力し、「追加」をクリックします。 4. 最後に、追加した URL のドメイン名が下に表示されます。ウィンドウを閉じると、直接アクセスできます。

See all articles