教程 | Scrollbar 教学

 

scrollbar 就是部落格旁边那个可以拉上拉下的滚动条啦 :)

1. 设计 → 修改 HTML

2. Ctrl+F 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 上面添加你要的效果的代码

4. 按 preview 看看效果有没有出现，再按 保存 即可。

教程 ①：添加背景色在滚动条

::-webkit-scrollbar {

height: 12px;

width: 12px;

background: #D9D9D9;

}

::-webkit-scrollbar-thumb {

background-color: #B2C0C6;

-moz-border-radius: 10px;

border-radius: 10px;

}

小解释
红色代码：可以换去你想要的颜色代码
蓝色代码：边框的弧度 *代码 px 两个一定要一样

教程 ②：添加背景图在滚动条

::-webkit-scrollbar {
height: 12px;
width: 12px;
background: url(图片 direct link);
}

::-webkit-scrollbar-thumb {
background: url(图片 direct link);
}

小解释
红色代码：可以换去你想要背景图的 url

<--- 教程更新于 2012.08.20 --->

教程 ③：另类滚动条 I

::-webkit-scrollbar { width: 9px;}

::-webkit-scrollbar-button:start:decrement,

::-webkit-scrollbar-button:end:increment { height:10px; display: block; background-color: #cccccc; border:1px solid #fff;}

::-webkit-scrollbar-track-piece { background-color:#cccccc; }

::-webkit-scrollbar-thumb{ background:#000000;border:1px solid #fff;}

::webkit-scrollbar-thumb:vertical {background:#fff);border: 0px solid #ffffff;border-right:none;}

::webkit-scrollbar-thumb:horizontal {background:#fff;border: 0px solid #ffffff;border-bottom;}

小解释
红色代码：scrollbar 的上下两个点
蓝色代码：scrollbar 的背景色
蓝色代码：滚动条（中间的）的颜色

教程 ④：另类滚动条 II

::-webkit-scrollbar {

width: 9px;

height: 7px;

}

::-webkit-scrollbar-track-piece  {

background-color: #999;

border: 4px solid #fff;

}

::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {

background-color: #fecdc9;

border: 1px solid #fff;

}

小解释
红色代码：滚动条（中间的）颜色
蓝色代码：滚动条（中间的）边框种类 *可选择要或不要

* 如果想要为你的 thumb 添加边框，可以添加以下代码：

border: 1px solid #000000;
-moz-border-radius: 10px;
border-radius: 10px; 

所有的代码都要添加在 { }之间哦 ^.^

预览图：