こんにちは、ナカムラです。
新人研修用に要素のサイズ取得について書きたいと思います。
今回は要素の高さを取得し、その要素の半分の高さにスクロールするボタンを作りました。
50%の位置がわかりやすいように、CSSで背景の色を変えています。
アンカーリンクにできるときはその方が良いですが、大きな画像の特定の位置へスクロールさせたい場合など、idをつけるのが難しい場合などに使えるかと思います。
DEMO
See the Pen JavaScript:要素のサイズ取得とスクロール by Nakamura (@takayo-nakamura) on CodePen.
要素の高さを取得し、スクロールしたい位置を準備する
// 要素の高さを取得する const elm = document.getElementById('contents') const elmHeight = elm.clientHeight
contentsを取得し、clientHeightプロパティの情報を変数elmHeightに挿入します。
要素の高さを取得できるプロパティは、2つあります。
・clientHeight:コンテンツ領域とpaddingまでのサイズ
・offsetHeight:コンテンツ領域とpadding、borderまでのサイズ
今回はborderを設定していないのでclientHeightを使いました。
幅の場合はclientWidth、offsetWidthがあり、取得するサイズの仕様は高さと同じで、borderを入れるかどうかです。
// 要素の高さの半分を変数に入れる const position = elmHeight * 0.5
elmHeightの50%なので、0.5をかけて変数positionへ挿入します。
これでスクロールの準備ができました。
ボタンをクリックしたらスクロールする
// ボタンを取得し、クリックされたらスクロールする const btn = document.getElementById('btn') btn.addEventListener('click', function(){ window.scrollTo(0,position) })
btnを取得し、addEventListenerでクリックしたときのイベント処理を書いていきます。
スクロール移動の処理はこちら
window.scrollTo(0,position)
scrollToは初めにX値、2番目にY値を記述します。
今回X値は移動させないので0にし、Y値には先ほど準備したpositionをセットします。
scrollTo(X値,Y値)
スクロール移動にも種類があります。
・scrollTo:指定した位置へスクロールする
・scrollBy:現在いる位置から指定した数値分移動する(相対的な位置になる)
その他
今回は要素のサイズをご紹介しましたが、ウィンドウのサイズも取得できます。
ウィンドウの内周
・window.innerWidth
・window.innerHeight
bodyなどの表示領域の部分の幅と高さを取得できます。
ウィンドウの外周
・window.outerWidth
・window.outerHeight
ブラウザ全体(外枠まで含む)の幅と高さを取得できます。
用途に合わせて使い分けてください。