css改变谷歌浏览器的滚动条样式

81 阅读 0 评论 54 点赞

我是靠谱客的博主儒雅丝袜，最近开发中收集的这篇文章主要介绍css改变谷歌浏览器的滚动条样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

详细内容请点击

/*---滚动条默认显示样式--*/

::-webkit-scrollbar-thumb{

height:50px;

outline-offset:-2px;

outline:2px solid #fff;

-webkit-border-radius:4px;

border: 2px solid #fff;

}

/*---鼠标点击滚动条显示样式--*/

::-webkit-scrollbar-thumb:hover{

height:50px;

-webkit-border-radius:4px;

}

/*---滚动条大小--*/

::-webkit-scrollbar{

width:8px;

height:8px;

}

/*---滚动框背景样式--*/

::-webkit-scrollbar-track-piece{

-webkit-border-radius:0;

}

==========================

::-webkit-scrollbar-track { background-color: #b46868; } /* 滚动条的滑轨背景颜色 */ 
::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); } /* 滑块颜色 */ 
::-webkit-scrollbar-button { background-color: #7c2929; } /* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-corner { background-color: black; } /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

更多html5内容请点击

转载于:https://www.cnblogs.com/j--d/p/html5-j--d.html