Webkit独自拡張でスクロールバーのデザインを変更する

#HTML

#CSS

野中龍一

2011.11.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ChromeのスクロールバーをCSSで変更できることを知ったので試してみました。
ちなみにこのブログのスクロールバーもChromeで見ると独自のデザインになっています。

Webkitの独自拡張なので、すべてのブラウザには適用されませんが、プログレッシブ・エンハンスメントを前提にサイトを構築するのであれば、利用するのもアリだと思います。

このサンプルはChromeで確認してください。

Sample 01

Sample 02

Smaple 03

Sample 04

Chromeで確認できない方へ

使いやすさは置いておくとして、デザインに合わせて変更できるのは統一感がだせて良いですね。

サンプルソース

HTML

<div id="scrollbar01" class="scrollbarSample">
	<p class="inner">Sample 01</p>	
</div>

<div id="scrollbar02" class="scrollbarSample">
	<p class="inner">Sample 02</p>	
</div>

<div id="scrollbar03" class="scrollbarSample">
	<p class="inner">Smaple 03</p>	
</div>

<div id="scrollbar04" class="scrollbarSample">
	<p class="inner">Sample 04</p>	
</div>

CSS Sample 01

#scrollbar01::-webkit-scrollbar
{
        width:5px;
        background:#eee;
}
        #scrollbar01::-webkit-scrollbar:horizontal
        {
                height:5px;
        }
#scrollbar01::-webkit-scrollbar-button
{
        width:5px;
        height:5px;
        background:#666;
}
#scrollbar01::-webkit-scrollbar-piece
{
        background:#eee;
}
        #scrollbar01::-webkit-scrollbar-piece:start
        {
                background:#eee;
        }
#scrollbar01::-webkit-scrollbar-thumb
{
        background:#333;
}
#scrollbar01::-webkit-scrollbar-corner
{
        background:#333;
}

CSS Sample 02

#scrollbar02::-webkit-scrollbar
{
        overflow:hidden;
        width:5px;
        background:#eee;
        
        -webkit-border-radius:3px;
        border-radius:3px;
}
        #scrollbar02::-webkit-scrollbar:horizontal
        {
                height:5px;
        }
#scrollbar02::-webkit-scrollbar-button
{
       display:none;
}
#scrollbar02::-webkit-scrollbar-piece
{
        background:#eee;
}
        #scrollbar02::-webkit-scrollbar-piece:start
        {
                background:#eee;
        }
#scrollbar02::-webkit-scrollbar-thumb
{
        overflow:hidden;
        -webkit-border-radius:3px;
        border-radius:3px;
        
        background:#333;
}
#scrollbar02::-webkit-scrollbar-corner
{
        overflow:hidden;
        -webkit-border-radius:3px;
        border-radius:3px;
        
        background:#333;
}

CSS Sample 03

#scrollbar03::-webkit-scrollbar
{
        overflow:hidden;
        width:5px;
        background:#fafafa;
        
        -webkit-border-radius:3px;
        border-radius:3px;
}
        #scrollbar03::-webkit-scrollbar:horizontal
        {
                height:5px;
        }
#scrollbar03::-webkit-scrollbar-button
{
       display:none;
}
#scrollbar03::-webkit-scrollbar-piece
{
        background:#eee;
}
        #scrollbar03::-webkit-scrollbar-piece:start
        {
                background:#eee;
        }
#scrollbar03::-webkit-scrollbar-thumb
{
        overflow:hidden;
        -webkit-border-radius:3px;
        border-radius:3px;
        
        background:#333;
}
#scrollbar03::-webkit-scrollbar-corner
{
        overflow:hidden;
        -webkit-border-radius:3px;
        border-radius:3px;
        
        background:#333;
}

CSS Sample 04

#scrollbar04::-webkit-scrollbar
{
        overflow:hidden;
        width:1px;
        background:#fafafa;
}
        #scrollbar04::-webkit-scrollbar:horizontal
        {
                height:1px;
        }
#scrollbar04::-webkit-scrollbar-button
{
       display:none;
}
#scrollbar04::-webkit-scrollbar-piece
{
        background:#eee;
}
        #scrollbar04::-webkit-scrollbar-piece:start
        {
                background:#eee;
        }
#scrollbar04::-webkit-scrollbar-thumb
{
        background:#333;
}
#scrollbar04::-webkit-scrollbar-corner
{
        background:#333;
}

細かい仕様については、下記サイトを参考にさせていただきました。