• Manager : 杨大坤先生
当前位置:主页 > 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>
最终效果为:

QQ图片20160911161857.png

随机推荐