1. ホーム
  2. ジャバスクリプト

[解決済み】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 は、ルート要素にボーダー(パディングやマージンではなく、実際のボーダー)を適用した場合の修正にのみ必要なようで、その場合は、おそらく特定のブラウザでのみ使用されます。