HTML/CSS

【css/sassで】スクロールを表現し、スクロールバーも非表示にする

バートリーのさいとうです。

今回は

【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本を目標に、実務から学んだプログラミングのあれこれを発信しています。

誰かのためになれば、嬉しいです。

最後まで読んでいただき、ありがとうございました。

それでは。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA