1. JavaScriptのスクロール処理
WebシステムをJavaScript開発していると案外必要となるのがスクロール位置の調整。
scrollTopメソッドを利用して自動縦スクロールを実現できますが、スクロール量を計算したり、とても大変。。。
そこで便利なのがScrollIntoViewメソッドです。
2. 指定したエレメントまで自動スクロールしてくれるScrollIntoViewメソッド
ScrollIntoViewメソッドは指定したエレメントまで自動でスクロールしてくれます。
var element = document.getElementById('element');
element.scrollIntoView();
3. ScrollIntoViewメソッドでスムーズにスクロールする
スマートフォンのWebアプリでよく使われるスムーズスクロール。スクロール時にアニメーションを追加することで柔らかい印象になります。ScrollIntoViewメソッドはスムーズスクロールに対応しており、たった一文追加するだけで簡単に実装可能です。
element.scrollIntoView({
behavior: 'smooth'
});