windowsのスクロールバーデザイン変更

Question

HPを作っている際に、右側にあるスクロールバーのデザインを変更したいのですが行い方を調べてもよくわかりません。。。
イメージとしては画像の右側です。

そもそもできるのかよろしくお願いします。。。

Comments

[m.ts10806]

Windowsのウィンドウのスクロールバーなのかブラウザのスクロールバーなのかで違いますが。「よく分かりません」では質問者さんが何を見て分からないのかこちらも分かりませんし、そもそも質問内容だけでは何もやってみていない状態なので丸投げの質問です。回答はほぼ期待できませんよ。「質問するときのヒント」に書いてあります→ https://teratail.com/help/question-tips#questionTips1-2 >投稿前に自分で一度調べてみましょう。そして調べたことを元に、一度は自分でやってみましょう。

Answer 1

webkitの独自機能で、ChromeとSafariにしか適用できませんが、
-webkit-scrollbarならば実現できると思います。
具体的に言うと、スクロールバーを擬似要素として扱える機能で、いつものようにheightで幅・background-colorで色・border-radius等で形（動かす部分の角を丸くするとか）などができます。
ざっと以下のようなイメージです

::-webkit-scrollbar{
	background-color:#f00;
}
::-webkit-scrollbar-thumb{
	background-color:#000;
}

詳細はリファレンスなど参照してください。

一応、IEも独自機能でscrollbar-base-color等実装してますが多分もう必要ないです。

Answer 2

1. デフォルトのスクロールバーをで消す。（bodyにoverflow: hidden;）
2. body直下に、高さをbodyと同じ高さにした要素を作り、それにスクロールバーのプラグインをセットする

でいけそうな気がします。

Answer 3

HP内のスクロールバーは変更可能ですが、
ブラウザ自体のスクロールバーは変更できないです。