BETA

【JavaScript】 scrollIntoView()が知らぬ間に進化していた。

投稿日:2018-12-24
最終更新:2019-05-30

はじめに

久しぶりにUser Scriptでスクロール操作をしようとMDNを見たら、scrollIntoView()が知らぬ間に進化していたので興奮しました。

Element.scrollIntoView()とは

ウェブページを特定の箇所までスクロールするもの。

Element.scrollIntoView() メソッドは、要素が(ブラウザのウィンドウ上の)表示範囲に入るまでページをスクロールします。
MDNより

今はまだ実験的な機能ですので注意!

document.body.scrollIntoView();  
// ページトップへ移動する  
// 正確には、body要素の上辺が画面の上辺にくるまでスクロールする  

hoge.scrollIntoView(false);  
// hoge要素の下辺が画面の下辺にくるまでスクロールする  

hoge.scrollIntoView({  
    behavior: 'smooth'  
});  
// スムーズスクロール!  

他にもオプションがあるようですが、対応しているWebブラウザが少なすぎるので割愛。
興味がある人は、MDNを見に行ってみてください。

進化していたポイント

scrollIntoViewOptionsなんてあったっけ!?

スムーズスクロールできるじゃん!!!
真ん中までスクロールとかかっこいい!!!

他にもいろいろあるかもね

今回はscrollIntoView()だったけど、他にもいっぱい進化しているのがあるのかもしれないなぁ、と思いましたまる

最新の動向をチェックしたいけれど、どこを見ればいいんだろうか。
とりあえずQiita漁るか…。

おわりに

そういえば、CSSにもscroll-behavior: smooth;みたいなのがありましたっけ。
VimiumがバグるのでUser Style Sheetで防いでいますが…。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@okayuの大して技術的ではないブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!