HUMAN INSIGHT CX
エクスペリエンスマネジメント/リサーチソリューション
コンサルティング
クリエイティブ・UX
制作・オペレーション
テクノロジー
データドリブン
マーケティング
メディア/
広告代理事業
サービスについて
オピニオン
トライベック広報
会社概要
社長メッセージ
経営理念
社名・ロゴの由来
トライベック・ニューノーマル
役員紹介
地図・アクセス

COLUMN

コラム

スクロール時のみ表示されるスクロールバーを実装してみる

2021年7月26日
プロダクション

概要

ある案件で、「Macのスクロールバーのように、スクロール時にのみ表示され、
一定時間経過で徐々に非表示にさせるスクロールバーを実装出来ないか」と相談がありました。
この相談を実現させるため、試行錯誤しながら実際に作成した過程をご紹介します。
※以下、画面は「HTML」「SCSS」「JS」「Result」のボタンで表示切り替えができます。

最初に試したこと

以下の手順でクラスを付け変え、スクロールバーの表示/非表示の切り替えを行ってみます。

  1. スクロールバーの非表示用のクラスを設定
  2. スクロールさせたときに非表示用のクラスを取り除く
  3. スクロールを止めて2秒後に非表示用のクラスを設定

ブラウザで確認

結果

表示/非表示の動きだけであれば問題ないのですが、
ふわっと消える(徐々に消えていく)アニメーションが出来ていませんでした。

フェードアウトアニメーションで消したいので、単なる表示/非表示の切り替えではなく、
CSSのtransitionとopacityを使って実現できないかを考えてみます。

結論

スクロールバーの上に背景色と同じ色の要素を被せて、
opacityを使って透過アニメーションさせてみます。
(※"hidden-scroll"のクラスを参照)
そうすると、要望通りの動きが実現できました。

ブラウザで確認

なお、"::-webkit-scrollbar"を使う方法も考えましたが、IE対応をしていないため、
今回は上記で実現しています。

この記事を書いた人

テクノロジーソリューション事業部

お問い合わせ

Web戦略策定からサイト構築、オペレーションまで、最適なワンストップのソリューションを提供します。
お気軽にお問い合わせください。

関連コンテンツ