こんにちは、ナカムラです。
前回の記事で、少しだけスクロールの操作を行いました。
今回は、スクロールに関するプロパティとメソッドについて、より詳しく整理していきたいと思います。
DEMO
プロパティやメソッドを実際に動作させたものになります。
メソッドの処理を組み込んだボタンはページの一番下にありますので、クリックしてみてください。
See the Pen JavaScriptのスクロール関連のプロパティとメソッドまとめ by Nakamura (@takayo-nakamura) on CodePen.
プロパティ
プロパティはオブジェクト（要素）が持っている情報です。
現在のスクロール量を取得したい時に使うプロパティ（読み取り専用）
スクロールした時に何px移動したかの数値を取得できます。
IE非対応のプロパティもあるので注意してください。
IE非対応
- scrollX
- scrollY
IE9以上に対応
- pageXOffset
- pageYOffset
windowオブジェクトのプロパティなので、windowにドット（.）で繋ぐ書き方になります。
window.pageYOffset
画面上に表示されない部分を含めた、要素内の寸法（読み取り専用）
インラインスクロールが発生した時に使用します。
- scrollWidth
- scrollHeight
要素内のスクロール位置
要素内のスクロール位置を制御したい場合は、こちらのプロパティの値を変更することで、スクロール位置を変えることができます。
- scrollTop
- scrollRight
- scrollBottom
- scrollLeft
メソッド
メソッドは関数のようなものです。
スクロール位置を変えるときに使います。
※アンカーリンクで移動できるものにJavaScriptを書くのは無駄なので、アンカーリンクで対応します。
- scroll()：絶対値。指定した要素の左上を(0,0）とし、そこからの距離を指定します。
- scrollTo()：絶対値。（scrollと同じ）
- scrollBy()：相対値。現在の位置から指定した数値の分だけ移動します。
- scrollIntoView()：特定の要素の位置へスクロールする※IE非対応、Safariはoptionが非対応
scrollIntoView()はIEとSafariが非対応なので、実務では要素の位置を取得して、scrollTo()を使用する方法を使うことになります。
まとめ
スクロールの調整はwindowに対するものと、要素内に対するもので少し違うので、混乱しないように整理しておきたいですね。
