您的位置：首页 > Web前端 > CSS

HTML：滚动条样式自定义（IE/FireFox/webkit）

2018-03-07 10:48 666 查看

IE浏览器


滚动条样式	支持情况	描述
scrollbar-3dlight-color	IE特有属性 IE5.5+	设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-highlight-color	IE特有属性 IE5.5+	设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-face-color	IE特有属性 IE5.5+	设置滚动框和滚动条箭头的颜色
scrollbar-arrow-color	IE特有属性 IE5.5+	设置滚动条箭头的颜色
scrollbar-shadow-color	IE特有属性 IE5.5+	设置滚动框的和滚动条箭头右下边缘的颜色
scrollbar-dark-shadow-color	IE特有属性 IE5.5+	设置滚动条槽的颜色
scrollbar-base-color	IE特有属性 IE5.5+	设置滚动条主要构成部分的颜色
scrollbar-track-color	IE特有属性 IE5.5+	设置滚动条轨迹组成部分的颜色

windows 8 支持情况

FireFox浏览器

原文有人做过测试，以下代码不能起作用，仅供参考测试。FireFox，目前用插件才会有效果。

@-moz-document url-prefix(http://),url-prefix(https://) {
/* 滚动条颜色 */
scrollbar {
-moz-appearance: none !important;
background: rgb(0,255,0) !important;
}
/* 滚动条按钮颜色 */
thumb,scrollbarbutton {
-moz-appearance: none !important;
background-color: rgb(0,0,255) !important;
}
/* 鼠标悬停时按钮颜色 */

thumb:hover,scrollbarbutton:hover {
-moz-appearance: none !important;
background-color: rgb(255,0,0) !important;
}
/* 隐藏上下箭头 */
scrollbarbutton {
display: none !important;
}
/* 纵向滚动条宽度 */
scrollbar[orient="vertical"] {
min-width: 15px !important;
}
}

webkit内核的浏览器


滚动条样式	描述
-webkit-scrollbar	滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等
-webkit-scrollbar-button	滚动条两端的按钮；可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果
-webkit-scrollbar-track	外层轨道；可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果
-webkit-scrollbar-track-piece	内层轨道，滚动条中间部分（除去）
-webkit-scrollbar-thumb	滚动条里面可以拖动的那部分
-webkit-scrollbar-corner	边角
-webkit-resizer	定义右下角拖动块的样式

jQuery插件

插件：jquery-custom-content-scroller

插件地址：http://manos.malihu.gr/jquery-custom-content-scroller/

使用：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--第一步：引入：滚动条相应的样式表文件和jquery的库文件-->
<link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.css" >
<script src="jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

<!--第二步：加载-->
<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>
</head>

<body>
<!--第三步：在要显示滚动条的元素加入 class="content" -->
<div  class="content"></div>
</body>
</html>

原文地址：https://www.lyblog.net/detail/314.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML 滚动条 CSS

相关文章推荐

新的分享

章节导航