ウィンドウサイズとスクローリング

ウィンドウの幅/高さ

document.documentElement のプロパティ clientWidth/clientHeight はまさに私たちがここで欲しいものです:

例えば、このボタンはあなたのウィンドウの高さを表示します。:

alert(document.documentElement.clientHeight)

alert( window.innerWidth ); // ウィンドウ幅
alert( document.documentElement.clientWidth ); // ウィンドウ幅 - スクロールバー

ドキュメントの幅/高さ

理論上は、ルートドキュメント要素は　documentElement.clientWidth/Height であり、すべてのコンテンツを囲むので、フルサイズを documentElement.scrollWidth/scrollHeight で測定できます。

これらのプロパティは通常の要素に対しては上手く動作します。しかしページ全体の場合、これらのプロパティは意図したとおりには動作しません。Chrome/Safari/Opera では、スクロールが無い場合、documentElement.scrollHeight は documentElement.clientHeight よりも小さいかもしれません! 通常の要素の場合、それはナンセンスです。

信頼できるウィンドウサイズを取得するために、それらのプロパティの最大を取る必要があります。:

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

alert('Full document height, with scrolled out part: ' + scrollHeight);

なぜそうなのでしょう？が、聞かない方が良いです。これらの不一致は古くからのものであり、 “スマート” なロジックではありません。

現在のスクロールを取得する

通常の要素は elem.scrollLeft/scrollTop に現在のスクロール状態を持っています。

ページではどうでしょう？ほとんどのブラウザはドキュメントのスクロールのための documentElement.scrollLeft/Top を提供していますが、Chrome/Safari/Opera はバグ (157855, 106133 のような) があり、document.documentElement の代わりに document.body を使用してください。

幸いにも、特別なプロパティ window.pageXOffset/pageYOffset により、これらの特殊性を覚える必要は全くありません。:

alert('Current scroll from the top: ' + window.pageYOffset);
alert('Current scroll from the left: ' + window.pageXOffset);

これらのプロパティは読み取り専用です。

スクローリング: scrollTo, scrollBy, scrollIntoView

通常の要素は scrollTop/scrollLeft を変更することでスクロールすることが出来ます。

ページに対して同じことができます:

• Chrome/Safari/Opera を除くすべてのブラウザ: document.documentElement.scrollTop/Left を変更します。
• Chrome/Safari/Opera の場合: 代わりに document.body.scrollTop/Left を使います。

それは動作しますが、クロスブラウザの非互換の匂いがします。良いことではありません。幸運なことに、よりシンプルでユニバーサルな解決策があります: 特別なメソッド window.scrollBy(x,y) と window.scrollTo(pageX,pageY) です。

• メソッド scrollBy(x,y) は現在の位置を基準としてページをスクロールします。例えば、scrollBy(0, 10) はページを下に 10px スクロールします。

  下のボタンはこのデモをします:

  window.scrollBy(0,10)

• メソッド scrollTo(pageX,pageY) はドキュメントの左上の角を基準としてページをスクロールします。これは scrollLeft/scrollTop の設定に似ています。

  一番先頭にスクロールするには、scrollTo(0,0) を使います。

  window.scrollTo(0,0)

これらのメソッドは同じ方法ですべてのブラウザで動作します。

scrollIntoView

完全性のために、もう１つメソッドを説明しましょう: elem.scrollIntoView(top).

elem.scrollIntoView(top) への呼び出しは elem が見えるようにページをスクロールします。１つの引数を持っています。:

• もし top=true (デフォルト) の場合、elem がウィンドウの上部に表示されるようページがスクロールされます。要素の上端はウィンドウの上部に揃います。
• もし top=false の場合、elem が下部に表示されるようページがスクロールされます。要素の下端はウィンドウの下部に揃います。

下のボタンは自身をウィンドウの上部に表示するようページをスクロールします:

this.scrollIntoView()

そして、このボタンは下部に表示するようページをスクロールします。:

this.scrollIntoView(false)

スクロールを禁止する

私たちはドキュメントを “スクロール不可” にする必要がある場合があります。例えば、すぐに注意を必要とするようなサイズの大きなメッセージを伝える必要があるとき、訪問者にはドキュメントではなく、そのメッセージとやりとりすることを望みます。

ドキュメントをスクロール不可にするためには、document.body.style.overflow = "hidden" を設定すれば十分です。ページは現在のスクロールで止まります。

やってみましょう:

document.body.style.overflow = 'hidden'

document.body.style.overflow = ''

１つ目のボタンはスクロールをフリーズさ、２つ目は再開します。

私たちは、document.body だけでなく他の要素に対しても、スクロールを “フリーズ” させる同じテクニックが使えます。

このメソッドの欠点は、スクロールバーが消えることです。もしスクロールバーがスペースを占めていたら、そのスペースは今や解放されているので、コンテンツはそれを埋めるために “ジャンプ” します。

それは少し変に見えますが、フリーズする前後で clientWidth を比較し、スペースが増えた場合(スクロールバーが消えたら)、コンテンツ幅を同じに維持するためにスクロールバーの代わりに document.body に padding を追加することで回避できます。

サマリ

ジオメトリ:

• ドキュメントの可視部分の幅/高さ(コンテンツ領域の幅/高さ): document.documentElement.clientWidth/Height

• スクロールアウト部分も含むドキュメント全体の幅/高さ:

  let scrollHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
  );

スクローリング:

• 現在のスクロールを読む: window.pageYOffset/pageXOffset.

• 現在のスクロールを変更する:

  • window.scrollTo(pageX,pageY) – 絶対座標,
  • window.scrollBy(x,y) – 現在の場所を基準にスクロール,
  • elem.scrollIntoView(top) – elem が見えるようにスクロール (ウィンドウの上部/下部に揃う).