自定义滚动条样式

来源：互联网发布：小哥哥是什么意思知乎编辑：程序博客网时间：2024/05/01 19:01

参考：用CSS美化你的滚动条

自定义浏览器滚动条的样式

看一下效果图：

看一下代码：

<body><div class="container">    <p>        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        test text test text test text test text test text test text test text test text test text        </p>        </div></body>

重点在css:

.container {    background-color: yellow;}::-webkit-scrollbar {    width: 15px;} /* 这是针对缺省样式 (必须的) */::-webkit-scrollbar-track {    background-color: lightskyblue;} /* 滚动条的滑轨背景颜色 */::-webkit-scrollbar-thumb {    background-color: red;} /* 滑块颜色 */::-webkit-scrollbar-button {    background-color:green;} /* 滑轨两头的监听按钮颜色 */::-webkit-scrollbar-corner {    background-color: black;} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

或者把容器的css代码改一下，让效果更直观一点：

.container {  <span style="color:#ff0000;">  width: 400px;    height: 300px;    overflow: scroll; /* 让它显示滚动条 */</span>    background-color: yellow;}::-webkit-scrollbar {    width: 15px;} /* 这是针对缺省样式 (必须的) */::-webkit-scrollbar-track {    background-color: lightskyblue;} /* 滚动条的滑轨背景颜色 */::-webkit-scrollbar-thumb {    background-color: red;} /* 滑块颜色 */::-webkit-scrollbar-button {    background-color:green;} /* 滑轨两头的监听按钮颜色 */::-webkit-scrollbar-corner {    background-color: black;} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

看一下这个效果：

当然以上代码是针对谷歌浏览器的滚动条设置，其它的浏览器修改暂时还不清楚，欢迎留言告知。

0 0