css3 - 关于滚动条的CSS如何设置问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css3 - 关于滚动条的CSS如何设置问题

巴扎黑 2017-04-17 11:19:22

[CSS3讨论组]

758

<p id='p3' style='width:200px;height:200px;overflow:auto;'>
        This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.
    </p>

就像上面代码 p里面有一段文字，我设置了overflow：auto；也就是超出部分显示滚动条，那么我如何修改这个滚动条的样式呢？

巴扎黑

全部回复(4)

ringa_lee2017-04-17 11:21:22 4楼

一个针对Webkit内核浏览器的滚动条美化的例子，不知道是不是你想要的

/* 滚动条部分 */
::-webkit-scrollbar {
    width:15px;
}

/* 轨道 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

/* 手柄 */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 15px;
    border-radius: 15px;
    background:rgba(200,200,200,0.7); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
/* 手柄激活态 */
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(200,200,200,0.4); 
}