0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

スクロールバーのカスタマイズで困ったこと

Posted at

スクロールバーをカスタマイズするときに困ったこと

01. はじめに

開発中、少しだけ手こずった部分があったので、備忘録までに
(メモ程度にしか書いておりません🙏)

※ブラウザによってはのちにでてくるコードの書き方は変わります🙏

仕様ブラウザ:Google Chorme
使用言語:css

02. 横スクロールバーの幅が変わらなかった

こんな感じで縦スクロールの幅は変わるのに、横スクロールの幅は変化しない...
ちなみにCSSコードはこんな感じ

//「block」はスクロールバーを表示させているdivタグに付与したクラス
.block::-webkit-scrollbar{
   width: 5px;
}

なぜだ...

03. heightが必要だった

横スクロールバーの幅を変えるにはheightが必要だったと判明

//「block」はスクロールバーを表示させているdivタグに付与したクラス
.block::-webkit-scrollbar{
   width: 5px;
   height:5px;//ここを追加
}

すると

いけた。縦スクロールは「width」、横スクロールは「height」で幅を変えれるみたい。
(横がheightって直感だとわかりづらかった)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?