IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【CSS】でスクロールバーの表示を変えて、個性的なデザインにカスタマイズする【WEBデザイン】

f:id:Surprisedblog:20190704044423j:plain

 

今回の記事は、

f:id:Surprisedblog:20190702070700p:plain

この見慣れたスクロールバーのカスタマイズに関する記事です。

 

前置き

Firefox、IEなどでは、サポートされていません。

 

スクロールバーのカスタマイズで使用する疑似要素のブラウザ互換性(2019/07/04時点)

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbarから引用

f:id:Surprisedblog:20190702071454p:plain

 

 

サンプルスクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

 

<div class="scrollbar">
<p>スクロールバースクロールバー</p>
<p>スクロールバースクロールバー</p>
<p>スクロールバースクロールバー</p>
<p>スクロールバースクロールバー</p>
<p>スクロールバースクロールバー</p>
<p>スクロールバースクロールバー</p>
</div>

 

 

非表示にする

::-webkit-scrollbar

 

スクロールバーを非表示にするには、::-webkit-scrollbar疑似要素を使用します。

 

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

 

.scrollbar::-webkit-scrollbar{
    display: none;
}

 

 

表示を変える

::-webkit-scrollbar

スクロールバー全体のスタイルを変更

 

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

 

.scrollbar::-webkit-scrollbar{
    background-color: #043dff;
    width: 30px;
    height: 10px;
}

 

::-webkit-scrollbar-button 

スクロールバーのボタンのスタイルを変更

 

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

 

.scrollbar::-webkit-scrollbar-button{
    background-image: url("https://cdn.image.st-hatena.com/image/square/b91fd7fd620c07d120901a246c0d22eb4639439c/backend=imagemagick;height=500;quality=80;version=1;width=500/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2FS%2FSurprisedblog%2F20190530%2F20190530175549.png");
    background-size: cover;
}

 

::-webkit-scrollbar-thumb

スクロールバーのドラッグ部分のスタイルを変更

 

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

 

.scrollbar::-webkit-scrollbar-thumb{
    background: #b5b5b5;
    border-radius: 1em;
}

 

hoverなどを設定することで、従来のスクロールバーのようなアクションにすることもできます。

 

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

 

.scrollbar::-webkit-scrollbar-thumb:hover{
    background: #8b8b8b;
}
.scrollbar::-webkit-scrollbar-thumb:active{
    background: #555555;
}

 

::-webkit-scrollbar-track

スクロールバーのトラック部分のスタイルを変更

 

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

 

.scrollbar::-webkit-scrollbar-track{
    background: orange;
}

 

::-webkit-scrollbar-track-piece

有効な活用方法が見つかりませんでした。

 

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

による説明

  • ::-webkit-scrollbar-track-piece - トラックの一部(プログレスバー)はハンドルで覆われていません。

 

 

::-webkit-scrollbar-corner

スクロールバーの角のスタイルを変更

 

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

 

.scrollbar::-webkit-scrollbar-corner{
    background: black;
}

 

 

::-webkit-resizer

リサイズのスタイルを変更する

 

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

スクロールバースクロールバー

 

.scrollbar{
    resize: both;
}
.scrollbar::-webkit-resizer{
    border: 10px solid #b5b5b5;
    border-radius: 1em;
}