webページのスクロールをなめらかにする「scroll-behavior」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

裏技も好きだけど、定番も大好きな下駄です。
 

今回は、webページでスクロール機能をつける時に、「scroll-behavior」プロパティを必ずセットしておいたほうがいいという話です。
 

scroll機能について

ここで言っている「scroll機能」ってスマホ画面が縦スクロールする機能だけではなく、「ページ内リンク」や、「最上部へ戻るボタン」などの機能を含めたすべての場合です。
 

デフォルト状態で、ページ内リンクをクリックすると、すぐにそのページのリンク先に移動しますが、その位置がページのどの位置なのかを把握するのが少し困難な場合が、たまにあります。
 

こうした時に「scroll-behavior」プロパティをセットしておけば、なめらかにスクロールして、上下左右どの方向にスクロールしたのかが視覚的に分かって、場所のポジショニングが明確になります。
 

もちろん、こうしたスクロールを一瞬で切り替えることで、ページ位置などは理解しなくてもよく、まるでURLが切り替わったページ遷移を演出する場合などは、デフォルト状態でも問題ないでしょう。
 

でも、個人的な経験として、基本的にこのプロパティをセットしておくことで、自作の簡易カルーセル処理などにも使えるので、覚えておいて損はない機能です。

scroll-behaviorについて

このプロパティは、基本的に2つの値だけ覚えておけばいいので非常に覚えやすいです。
 

瞬時にスクロールする「auto」と、なめらかにスクロールする「smooth」です。
 

非常に簡単なので、サンプルソースを見てもらいましょう。
 

 

autoとsmoothのそれぞれの1,2,3リンクをクリックすると、挙動が確認できます。
 

See the Pen
scroll-smooth
by YugetaKoji (@geta1972)
on CodePen.


 

ちょびっと解説

サンプルは、ページ内リンクで表現しましたが、javascriptで、scrollTopなどでの移動に対してもこのプロパティをセットしておくと、なめらか移動することができます。
 

ページ全体をスクロールするようなページ内リンクの場合は、サンプルのままでいいんですが、インラインでの要素内部をスクロールさせたい場合は、javascriptでセットすることで、ページ全体がスクロールしてしまう状態を防ぐことができます。
 

機能自体はわかり易すぎるので、さほど説明などは必要ないかと思うのですが、実装方法や、uiなどに関しては、慣れが必要かもしれませんね。
 

なにはともあれ、この機能をセットしておかない手はないでしょう。
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です