バートリーのさいとうです。
今回は
【css/sassで】スクロールを表現し、スクロールバーも非表示にする
というテーマで解説していきます。
cssでスクロールバー、作れます。
スクロールバーの表現の仕方は結構記事にされていましたが、そのスクロールバーの”バー”を非表示にするための方法とsassでの書き方が調べてもなかなか出てこなかったので共有します。
この記事を読めば
- cssでスクロールバーの作り方がわかる
- sassでスクロールバーを消すときの書き方がわかる
ので、最後までお付き合いください。
スクロールバーの作り方
まずは基本から。
下のグレーのブロック内で縦方向にスクロールしてみてください。
See the Pen scrollbar by サイトウユウキ (@yuki-lm) on CodePen.
ブロックの中でスクロールするのを確認できたと思います。
overflow-y: scrollを利用すると、これが実現できます。
overflow-y: scroll;とりあえずこれをコピペすればスクロールの挙動は再現可能です。
しかし、スクロールバーを非表示にしたい時もあります。
その時は
See the Pen scrollbar 非表示 by サイトウユウキ (@yuki-lm) on CodePen.
このようにします。
ブラウザによって必要な記述は違いますが、ひとまずsafariとchromeに対応したものを利用するなら
.scrollbar {
background-color: #ebebeb;
width: 100px;
height: 100px;
overflow-y: scroll;
}
.scrollbar::-webkit-scrollbar {
display: none
}このように、セレクタ名の後ろに-webkit-scrollbarを指定し、プロパティでdisplay: noneを付与します。
ここまでで、cssを利用したスクロールエフェクトの作り方と、スクロールバーを非表示にする方法が理解できました。
では、僕が詰まったsassでの書き方をみていきましょう。
sassを利用している場合
こちらの記事が参考になりました。
Sassで記述するとこうなります。（先ほどのscrollbarセレクタをそのまま利用します。）
.scrollbar
background-color: #ebebeb
width: 100px
height: 100px
overflow-y: scroll
&::-webkit-scrollbar
display: none実際に試してはないですが、これで動くはずです。
&::を利用する、擬似要素と同じ扱いをすれば良いんですね。
わかればそんなことか、ということでしたが、パッと閃かず調べ方も意外と難しかったです。
補足
ここからは補足になります。
補足1: IEやFirefoxなどに対応する場合
この辺はめんどくさいですが、ひとまず以下の二つの記事が参考になりそうです。
もし対応が必要であれば、参考にしてみてください。
補足2: スクロールバーを編集することもできる
スクロールバーをなくすこともできますが、編集することもできます。
簡単な例がこちらにも記載されておりますので、参考にしてみてください
この辺はたくさん他の記事で紹介されている気がしますので、「css スクロールバー デザイン」などで調べてみてください。
まとめ
今回は、css/sassでスクロールを表現し、スクロールバーも非表示にする方法を解説しました。
このヌルッと動く感じがcssで表現できるの、すごい好きです。
このブログは、月に15本を目標に、実務から学んだプログラミングのあれこれを発信しています。
誰かのためになれば、嬉しいです。
最後まで読んでいただき、ありがとうございました。
それでは。
