webページのスクロールをなめらかにする「scroll-behavior」
こんにちわ。
裏技も好きだけど、定番も大好きな下駄です。
今回は、webページでスクロール機能をつける時に、「scroll-behavior」プロパティを必ずセットしておいたほうがいいという話です。
scroll機能について
ここで言っている「scroll機能」ってスマホ画面が縦スクロールする機能だけではなく、「ページ内リンク」や、「最上部へ戻るボタン」などの機能を含めたすべての場合です。
デフォルト状態で、ページ内リンクをクリックすると、すぐにそのページのリンク先に移動しますが、その位置がページのどの位置なのかを把握するのが少し困難な場合が、たまにあります。
こうした時に「scroll-behavior」プロパティをセットしておけば、なめらかにスクロールして、上下左右どの方向にスクロールしたのかが視覚的に分かって、場所のポジショニングが明確になります。
もちろん、こうしたスクロールを一瞬で切り替えることで、ページ位置などは理解しなくてもよく、まるでURLが切り替わったページ遷移を演出する場合などは、デフォルト状態でも問題ないでしょう。
でも、個人的な経験として、基本的にこのプロパティをセットしておくことで、自作の簡易カルーセル処理などにも使えるので、覚えておいて損はない機能です。
scroll-behaviorについて
このプロパティは、基本的に２つの値だけ覚えておけばいいので非常に覚えやすいです。
瞬時にスクロールする「auto」と、なめらかにスクロールする「smooth」です。
非常に簡単なので、サンプルソースを見てもらいましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <title>scroll-behavior</title> <style type="text/css"> a{ text-decoration: none; } .scroll{ width:100px; height:100px; border:1px solid black; overflow-y:scroll; line-height:100px; text-align:center; } .scroll > *{ width:100%; height:100px; font-size:30px; } .scroll[type="auto"]{ scroll-behavior:auto; } .scroll[type="smooth"]{ scroll-behavior:smooth; } </style> </head> <body> <p>scroll-vihavior:auto;</p> <nav> <a href="#scroll-auto-1">1</a> <a href="#scroll-auto-2">2</a> <a href="#scroll-auto-3">3</a> </nav> <div class="scroll" type="auto"> <div id="scroll-auto-1">1</div> <div id="scroll-auto-2">2</div> <div id="scroll-auto-3">3</div> </div> <p>scroll-vihavior:smooth;</p> <nav> <a href="#scroll-smooth-1">1</a> <a href="#scroll-smooth-2">2</a> <a href="#scroll-smooth-3">3</a> </nav> <div class="scroll" type="smooth"> <div id="scroll-smooth-1">1</div> <div id="scroll-smooth-2">2</div> <div id="scroll-smooth-3">3</div> </div> </body> </html> |
autoとsmoothのそれぞれの1,2,3リンクをクリックすると、挙動が確認できます。
See the Pen
scroll-smooth by YugetaKoji (@geta1972)
on CodePen.
ちょびっと解説
サンプルは、ページ内リンクで表現しましたが、javascriptで、scrollTopなどでの移動に対してもこのプロパティをセットしておくと、なめらか移動することができます。
ページ全体をスクロールするようなページ内リンクの場合は、サンプルのままでいいんですが、インラインでの要素内部をスクロールさせたい場合は、javascriptでセットすることで、ページ全体がスクロールしてしまう状態を防ぐことができます。
機能自体はわかり易すぎるので、さほど説明などは必要ないかと思うのですが、実装方法や、uiなどに関しては、慣れが必要かもしれませんね。
なにはともあれ、この機能をセットしておかない手はないでしょう。