スキップしてメイン コンテンツに移動

些細な日常

CSSのscroll-behaviorのsmoothでページ内のスクロールイベントにゆっくり遅らせるアニメーションを付ける

今までブログに目次のジャンプリンクフローティングの戻るボタンを設置して来た。HTMLのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰囲気が殆ど変わらないために自分はどこにいるのか、リンクを使ってページ内を本当に移動したのかどうかが分かり兼ねる。

少しでも混乱しないために、または折角と設置したはずの目次のジャンプリンクやフローティングの戻るボタンを気持ち良く使うというサイトのUX(User Experience/利用者の体験)を向上させるべく、ページ内を移動するスクロールイベントにゆっくり遅らせるアニメーションを付けるようにデザインを相応しく変えると良いと思う。

CSSscroll-behaviorのsmoothの使い方

サイトのスクロールイベントの経過時間を遅らせてゆっくりのアニメーションのデザインを付けられるのがCSSのscroll-behaviorという要素なんだ。

二つの値を取る。デフォルトで何もなく、一瞬で、スクロールするのが「auto」で、ゆっくり遅らせるアニメーションでスクロールするのが「smooth」になる。他にはデザインと関係ないけれどもCSSのマークアップで後から値を初期化する場合の「initial」や値を引き継ぐ場合の「inherit」や値を引き継ぐかさもなければ初期化する「unset」も使える。

ブログでも取り入れたけれどもサイト全体にscroll-behaviorをかける場合はhtmlタグに指定するのが最も簡単な方法になる。

html {scroll-behavior:smooth;}

サンプルのリンク:押すとCSSのscroll-behaviorのsmoothのゆっくり遅らせるアニメーションと共にヘッダーのブログ名:些細な日常へ移動する(ブラウザかデバイスのバックボタンで戻れる)

CSSのscroll-behaviorはリンク先のidを含む領域タグのdivなどのボックスに指定する。

サイトの一部で使う場合はCSSのheightとoveflowのscrollなどで作成した特定のスクロールボックスに指定しないと動かない。

サンプルのスクロールボックス

HTML

<div class="scroll-container">
<div class="scroll-box">
<p id="page-top">上</p>
<p id="page-middle">中</p>
<p id="page-bottom">下</p>
</div>
<div class="scroll-switch">
<a href="#page-top">上</a><a href="#page-middle">中</a><a href="#page-bottom">下</a>
</div>
</div>

CSS

.scroll-container {display:grid;grid-template-columns:10fr 1fr;justify-content:center;align-items:center;}
.scroll-switch {border:#4682b4 1px solid;padding:6px;justify-self:center;display:flex;flex-direction:column;}
.scroll-box {height:300px;overflow:scroll;scroll-behavior:smooth;font-size:5em;color:#fffaf0;background:#ff00ff;}
.scroll-box p {display:flex;justify-content:center;align-items:center;height:100%;}

現時点、scroll-behaviorはブラウザの実装状況が甚だ限られていてCan I use CSSOM Scroll-behavior?(CSSOM Scroll-behaviorは使えるか)によるとChrome61以降、Firefox36以降、Opera48以降で反映する。他の主要なブラウザとしてEdgeやSafariでも反映するようにならないと誰でも気軽に使うのは厳しいかも知れない。

ブラウザに対応させるPolyfillや他にもJavaScript/jQueryを使った方法があるから必要に応じて導入できる。

通常、スクロールで移動した後は画面/スクロールボックスの上部にリンク先がくっ付いて表示されてしまう。引き離すにはscroll-behaviorのリンク先のidにCSSのscroll-marginscroll-paddingを指定すると良いと思う。外側や内側の余白をリンク先の上に付けておくとスクロールで移動した後にリンク先を画面/スクロールボックスの上部と引き離せる。

余白の向きを個別に指定するにはscroll-margin-topやscroll-padding-topを記載すると上にかかる。

サンプルのソースコード

リンク先を見出しのh2タグとしてジャンプ後に上にscroll-margin-topで二文字の外側の余白を付ける。

CSS

h2 {scroll-margin-top:2em;}

scroll-behaviorはサイトのデザインに大きな影響を与えるわけではないからブラウザの実装状況は幾らか低くても僕は使ってしまうけど、しかしもっと普及するのを期待せずにはいられない便利なCSS要素だと感じる。

関連ページ
参考サイト

コメント

最近の投稿

日付: 

Bardの事実認識の2023年9月の更新の実力の確認

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...