webkit内核浏览器的滚动条DIY - 洛铭家园--一个乐于分享乐趣的博客|Roymin.com

当前位置：主页 > webkit内核浏览器的滚动条DIY

webkit内核浏览器的滚动条DIY

分类：资源分享 | 发布：Roymin | 时间：2016-9-11 | 标签: 滚动条美化 webkit内核

简介： 更改浏览器滚动条样式以前没怎么接触过。上网查找了一些资料。整理mark如下：首先是基于webkit内核浏览器的几个解析： ...

更改浏览器滚动条样式以前没怎么接触过。上网查找了一些资料。整理mark如下：

首先是基于webkit内核浏览器的几个解析：

浏览器滚动条说明

-webkit-scrollbar //图1，滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
-webkit-scrollbar-button //图2，滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
-webkit-scrollbar-track //图3，外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
-webkit-scrollbar-track-piece //图4，内层轨道，滚动条中间部分（除去）。
-webkit-scrollbar-thumb //图5，滚动条里面可以拖动的那部分
-webkit-scrollbar-corner //图6，边角
-webkit-resizer //图7，定义右下角拖动块的样式

在应用中，给body或相关ID附加以上即可。

如：

<style>
    body::-webkit-scrollbar {
        width:6px;
        height:10px;
    }
    body::-webkit-scrollbar-button    {
		display:none
    }
    body::-webkit-scrollbar-track     {
        background:#fff;
    }
    body::-webkit-scrollbar-track-piece {
    }
    body::-webkit-scrollbar-thumb{
        background:#57bae8;
        border-radius:3px;
    }
	body::-webkit-scrollbar-thumb:hover{
        background:red;
    }
    body::-webkit-scrollbar-corner {
        background:#fff;
    }
    body::-webkit-scrollbar-resizer  {
        background:#fff;
    }
</style>
<body>
	<div style="margin-top:1024px;">
		<p>这是一段演示代码，webkit内核浏览器的滚动条美化。</p>
	</div>
</body>

最终效果为：