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

2020年11月7日

テクノロジー

t f B! P L
裏技も好きだけど、定番も大好きな下駄です。 今回は、webページでスクロール機能をつける時に、「scroll-behavior」プロパティを必ずセットしておいたほうがいいという話です。

scroll機能について

ここで言っている「scroll機能」ってスマホ画面が縦スクロールする機能だけではなく、「ページ内リンク」や、「最上部へ戻るボタン」などの機能を含めたすべての場合です。 デフォルト状態で、ページ内リンクをクリックすると、すぐにそのページのリンク先に移動しますが、その位置がページのどの位置なのかを把握するのが少し困難な場合が、たまにあります。 こうした時に「scroll-behavior」プロパティをセットしておけば、なめらかにスクロールして、上下左右どの方向にスクロールしたのかが視覚的に分かって、場所のポジショニングが明確になります。 もちろん、こうしたスクロールを一瞬で切り替えることで、ページ位置などは理解しなくてもよく、まるでURLが切り替わったページ遷移を演出する場合などは、デフォルト状態でも問題ないでしょう。 でも、個人的な経験として、基本的にこのプロパティをセットしておくことで、自作の簡易カルーセル処理などにも使えるので、覚えておいて損はない機能です。

scroll-behaviorについて

このプロパティは、基本的に2つの値だけ覚えておけばいいので非常に覚えやすいです。 瞬時にスクロールする「auto」と、なめらかにスクロールする「smooth」です。 非常に簡単なので、サンプルソースを見てもらいましょう。 <!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などに関しては、慣れが必要かもしれませんね。 なにはともあれ、この機能をセットしておかない手はないでしょう。

このブログを検索

プロフィール

自分の写真
町田市, 東京都, Japan
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出です。

ブログ アーカイブ

QooQ