概要

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

最初に試したこと

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

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

ブラウザで確認

結果

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

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

結論

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

ブラウザで確認

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