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

最新推荐文章于 2024-07-29 09:26:52 发布

Siimple

最新推荐文章于 2024-07-29 09:26:52 发布

阅读量2.5w

点赞数 1

分类专栏： HTML 前端文章标签： HTML 滚动条 CSS

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

1.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 支持情况
这里写图片描述

2.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;   
    }   
}

3.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	定义右下角拖动块的样式

4.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>