本記事は一人アドベントカレンダー企画の一つです。
30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー
JAVASCRIPT.INFOを元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。
2.1.9 要素サイズとスクローリング
知らない単語
- ジオメトリとは
- コンピュータグラフィックスにおける描画対象の形状や、形状を定義づける頂点の座標や線分、面などの図形を表す式の係数といったデータの組み合わせを意味する
学んだこと
要素の幅、高さや他のジオメトリの特徴を関する情報を読み取ることのできるプロパティについて
- ジオメトリ
幅、高さや他のジオメトリを提供する要素プロパティは常に数値で、ピクセルと仮定される
画像は全体像だが、1つの図でそれらすべてを表現するのは難しい事である
- 要素が持つジオメトリプロパティ
offsetParent は最も近い position 指定された祖先である
offsetLeft/offsetTop は offsetParent の左上端を基準とする座標
offsetWidth/offsetHeight はボーダーを含む要素の 外部の 幅/高さ
clientLeft/clientTop は左上の外側の角から左上の内側の角までの距離である
左から右の OS では、常に左/上のボーダー幅で、 右から左へのOSの場合、縦スクロールバーは左にある
clientWidth/clientHeight はコンテンツの幅/高さだが、スクロールバーは含まない
scrollWidth/scrollHeight はスクロールアウト部分を含むコンテンツの幅/高さ
scrollLeft/scrollTop は要素のスクロールアウトされた部分の幅/高さ
scrollLeft/scrollTop 以外のすべてのプロパティは読み取り専用である
感想
要素が持つジオメトリプロパティは種類が多いので、関連付けて覚えていきたい。
2.1.10 ウィンドウサイズとスクローリング
知らない単語
- 無し
学んだこと
- ジオメトリ
ドキュメントの可視部分の幅/高さ
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 が見えるようにスクロール
というように使える
感想
ジオメトリなど、前の章と被っている所もあるので、振り返りながら理解を深めていく必要がある。
2.1.11 座標
知らない単語
- 無し
学んだこと
- ウィンドウ座標: getBoundingClientRect
ウィンドウ座標はウィンドウの左上端から始まる
メソッド elem.getBoundingClientRect() はelem に対する座標を返す
top – 要素の上端の Y-座標,
left – 要素の左端の X-座標,
right – 要素の右端の X-座標,
bottom – 要素の下端の Y-座標.
図で表すと
のようになる
- elementFromPoint(x, y)
document.elementFromPoint(x, y)は、ウィンドウ座標 (x, y) で最もネストされた要素を返す
構文
let elem = document.elementFromPoint(x, y);
- ドキュメント座標
ドキュメント相対座標は、ウィンドウではなくドキュメントの左上端から始める
CSS では、ウィンドウ座標は position:fixed で記述するが、ドキュメント座標は position:absolute に近い
position:absolute と top/left を使うことで、ドキュメント上の特定の場所に何かを置くことができる
- ドキュメント座標の取得
要素のドキュメント座標を取得するための標準メソッドは無いが、書き方は以下である
pageY = clientY + ドキュメントのスクロールアウトした垂直部分の高さ
pageX = clientX + ドキュメントのスクロールアウトした水平部分の幅
関数 getCoords(elem) は elem.getBoundingClientRect() からウィンドウ座標を取り、それらに現在のスクロールを加える
// 要素のドキュメント座標を取得
function getCoords(elem) {
let box = elem.getBoundingClientRect();
return {
top: box.top + pageYOffset,
left: box.left + pageXOffset
};
}
のように書く
感想
ウィンドウ座標はfixed、ドキュメント座標はabsoluteと覚えて、同じ座標でも、違うので混同しないようにする。
最後に
ドキュメントについてはかなり理解が深まったと思うが、とにかく覚える事が多いので、間違えないように、忘れないようにしたい。