[解決済み】JavaScriptでスクロール時のウィンドウのX/Y位置を取得する。
2022-04-19 13:23:02
質問
現在の表示可能なウィンドウの位置(ページ全体の幅/高さに対する相対的な位置)を取得する方法を見つけ、それを使ってあるセクションから別のセクションに強制的にスクロールできるようにしたいと思っています。しかし、どのオブジェクトがブラウザの真のX/Yを保持しているかを推測することに関しては、非常に多くのオプションがあるように思われます。
IE 6+、FF 2+、Chrome/Safariのうちどれを動作させればいいのでしょうか?
window.innerWidth
window.innerHeight
window.pageXOffset
window.pageYOffset
document.documentElement.clientWidth
document.documentElement.clientHeight
document.documentElement.scrollLeft
document.documentElement.scrollTop
document.body.clientWidth
document.body.clientHeight
document.body.scrollLeft
document.body.scrollTop
また、他に何かあるのでしょうか?ウィンドウがどこにあるかがわかれば、イベントチェーンを設定して、ゆっくりと
window.scrollBy(x,y);
を、希望する地点に到達させる。
どのように解決するのですか?
jQuery(v1.10)がこれを見つけるために使う方法は
var doc = document.documentElement;
var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
ということです。
-
をテストしています。
window.pageXOffset
を使い、それが存在すればそれを使う。 -
それ以外の場合は
document.documentElement.scrollLeft
. -
そして、次のように減算します。
document.documentElement.clientLeft
が存在する場合
の引き算は
document.documentElement.clientLeft
/
Top
は、ルート要素にボーダー(パディングやマージンではなく、実際のボーダー)を適用した場合の修正にのみ必要なようで、その場合は、おそらく特定のブラウザでのみ使用されます。
関連
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Heroku:ノードアプリで「このアプリにはデフォルトの言語が検出されませんでした」エラーがスローされる
-
[解決済み】JavaScript "Uncaught TypeError: object is not a function" 連想性の質問
-
[解決済み] ローカルファイルを開くことができません - Chrome: ローカルリソースのロードが許可されていません
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】Vueのテンプレートまたはレンダー関数が定義されていない 私はどちらも使っていないのですが?
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み】 Uncaught Reference Error: stLight is not defined (in Chrome only)
-
[解決済み】Syntax error: JavaScriptの不正なreturnステートメント
-
[解決済み] Uncaught (in promise) TypeError: フェッチに失敗してCorsエラー
-
[解決済み] $(window).scrollTop() vs. $(document).scrollTop()