JS ウィンドウサイズの取得と様々なスクロール情報を取得する

今回は、「ウィンドウサイズとスクロール」についてご紹介させて頂きます。

どちらも知っておくととても便利な機能ですので、ぜひ覚えておきましょう。

ブラウザのサイズを計測する
window.scroll*
1. window.scrollBy
2. window.scrollTo
scrollIntoView
1. scrollIntoView
2. プロパティ
あとがき

ブラウザのサイズを計測する

JavaScriptでウィンドウのサイズを計測する方法を見ていきましょう。

サイズを計測するプロパティには以下の4つがあります。

document.documentElement.clientWidth
document.documentElement.clientHeight
window.innerWidth
window.innerHeight

上の２つと、下の2つの違いは、スクロールバーを含めるかどうかの違いです。

「document」で始まる上の2つは、スクロールバーを除いたサイズを取得します。

「window」で始まる下の２つは、スクロールバーを含んだサイズを取得します。

HTML
        <input type="button" value="ウィンドウ" id="countsize" />

let newWindow = document.getElementById('countsize');
countsize.addEventListener('click', function () {
  alert(window.innerWidth);
  alert(document.documentElement.clientWidth);
  alert(window.innerHeight);
  alert(document.documentElement.clientHeight);
});

ここでは、以下の数値が表示されます。

1536
1519
746
746

window.scroll*

window.scrollBy

「window.scrollBy」メソッドは、現在位置から指定した距離だけ移動します。

「window.scrollBy(水平方向, 垂直方向)」とピクセルで指定します。

以下のスクロールボタンをクリックすると、上に100pxずつ移動します。

let buttonClick = () => {
  window.scrollBy(0, -100);
};
let scrollClick = document.getElementById('countsize');
scrollClick.addEventListener('click', buttonClick);

window.scrollTo

「window.scrollTo」メソッドは、指定した位置へスクロールします。

左上の角が「(0,0)」で基準になっています。

つまり、「(0,0)」を指定すると、ページのトップに戻ります。

let buttonScrollTop = () => {
  window.scrollTo(0, 0);
};
let scrollWindow = document.getElementById('scrolltop');
scrollWindow.addEventListener('click', buttonScrollTop);

scrollIntoView

「scrollIntoView」は、指定した要素がページの上部、または下部に表示されるように指定することが出来ます。

let scrollIn = document.getElementById('scrollview');
scrollIn.addEventListener('click', function () {
  scrollIn.scrollIntoView();
});

「scrollIntoView(true)」のように、引数を「true」または指定しない場合は、ページの上部に、「false」を指定すると下部にスクロールします。

プロパティ

「scrollIntoView」は以下のプロパティを持ちます。

プロパティ	値	意味
behavior	auto	デフォルト値ブラウザに依存
	smooth	スムーズスクロール
block （縦）	start	デフォルト値ウィンドウ上部へ
	center	ウインドウ中央（縦）
	end	ウィンドウ下部へ
	nearest	現在地から近い方
inline （横）	start center end nearest	それぞれ横方向へ