CSS 怎么设置网页下拉条 (滚动条) 样式?
很多朋友在网页设计中要自定义下拉条 (滚动条) 样式的情景, 下拉条的样式我们可以通过 CSS 来控制的, 下拉条能不能换颜色或者做的更好看一些呢? 那么滚动条的设置都有哪些呢? 下面本篇文章来介绍一下设置下拉条 (滚动条) 的方法.
下拉条 (滚动条) 的设置在 CSS 中不能简简单单就完成, 必竟它是由好多部分组成. 所以我们如果想要设置滚动条就要先知道哪些是控制哪些部分的. 下面一一介绍:scrollbar-face-color:/* 滑块颜色 */
scrollbar-arrow-color:/* 箭头颜色 */
scrollbar-shadow-color:/* 滑块边线颜色 */
scrollbar-track-color:/* 滑轨颜色 */
既然已经知道这些设置项, 我们就可以着手去设置了.
CSS 设置代码:*{
scrollbar-face-color:#fff;/* 滑块颜色 */
scrollbar-arrow-color:#000;/* 箭头颜色 */
scrollbar-shadow-color:#000000;/* 滑块边线颜色 */
scrollbar-track-color:#dde3fa;/* 滑轨颜色 */
}
此设置对所有滚动条都有作用.
做网页设计有一个让人头疼的问题就是解决兼容性. 刚刚我们是在 IE11 下进行的测试. 做滚动条设置不能只针对 IE 浏览器来做, 所以有必要再换浏览器测试试. 这里小编使用谷哥做了一个测试, 结果妥妥的没效果.
为了兼容其他浏览器还需要做一些功夫. 这里针对 webkit 浏览器做一些设置. 同样我们还是有必要先了解其属性:::-webkit-scrollbar{}/* 整体设置 */
::-webkit-scrollbar-track/* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-thumb/* 滑块颜色 */
::-webkit-scrollbar-button/* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-corner/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
使用伪元素设置 CSS.
继续添加以下代码::-webkit-scrollbar{
background-color:#000
}
::-webkit-scrollbar-track{
background-color:#7dc2f6;
}
::-webkit-scrollbar-thumb{
background-color:#1b99f7;
}
::-webkit-scrollbar-button{
background-color:#b9e0fd;
}
::-webkit-scrollbar-corner{
background-color:#018ef8;
}
再次测试输出, 现在 IE 和谷哥类浏览器都能看到变化了.
接下来再看看如何隐藏滚动条.
对于浏览器滚动条而言如果同时隐藏横向和纵向滚动条可以直接使用 overflow:hidden 即可. 如果单一方向隐藏, 可以做单方向的隐藏. 如:overflow-x:hidden;/* 横向隐藏 */
overflow-y:hidden;/* 纵向隐藏 */
}
好了滚动条设置就讲到这里了, 你学会了吗?
注意事项
以上 2 种 CSS 对 edge 没有作用
其他浏览器可以使用一些插件也可以实现
更多 Web 开发 / 知识, 请查阅 HTML 中文网 !!
来源: /qa/css3/17600.html
