この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
ChromeのスクロールバーをCSSで変更できることを知ったので試してみました。
ちなみにこのブログのスクロールバーもChromeで見ると独自のデザインになっています。
Webkitの独自拡張なので、すべてのブラウザには適用されませんが、プログレッシブ・エンハンスメントを前提にサイトを構築するのであれば、利用するのもアリだと思います。
このサンプルはChromeで確認してください。
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;
}
細かい仕様については、下記サイトを参考にさせていただきました。
参考
この記事は「Webkit独自拡張でスクロールバーのデザインを変更する」の転載です。