修改浏览器滚动条样式
2017-12-28 16:10
627 查看
修改浏览器滚动条样式
因为在现在的大部分项目中很多都用到了滚动条，有时候用到模拟的滚动条，现在说下滚动条的CSS也能解决,但总的来说css仍然有点局限，那必然就会有js方法去实现，今天我们会对css控制和js控制滚动条样式进行一个全面的总结。假设：在使用js修改浏览器样式的时候，是通过手动重新画了滚动条，而不是原生的滚动条
一：webkit的CSS设置滚动条
1.1 主要有下面7个属性::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-webkit-scrollbar-corner 边角 ::-webkit-resizer 定义拖动块的样式
如下面代码，我们进行对窗口中滚动条进行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 16px;
height: 16px;
background-color: #7af5cf;/*//背景色*/
}
/*定义滚动条轨道 内阴影+圆角*//* 滚动槽 */
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #4e3cf5;/*滚动条槽的颜色*/
}
/*定义滑块 内阴影+圆角*//* 滚动条滑块 */
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/*交互时样式设置*/
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(157, 178, 255, 0.82);
width: 10px;
height: 10px;
border: 6px;
}
/* 两边按钮设置*/
::-webkit-scrollbar-button {
width: 10px;
height: 10px;
border: 2px;
background: #d3b71d;
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*当鼠标在水平滚动条递减属性的按钮上的状态，在该文件中就只有水平方向的第一个按钮*/
/* decrement 表示递减的碎片 */
width: 10px;
height: 10px;
border: 6px;
background: #d3150b;
}
/*内层轨道，滚动条中间部分（除去）,滚动槽颜色可能会遮挡该颜色*/
::-webkit-scrollbar-track-piece {
/*background: #29d32f;*/
}
/*两个滚动条的交汇处*/
::-webkit-scrollbar-corner {
width: 10px;
height: 10px;
border: 2px;
background: #bdd39b;
}
::-webkit-scrollbar-track-piece:start {
/*滚动条上半边或左半边*/
width: 10px;
height: 10px;
border: 2px;
background: #d1a2d3;
}
/*----*/
/* 定义div布局 */
.container {
height: 400px;
width: 300px;
border: 1px solid darkred;
overflow: auto;
}
.child1 {
height: 700px;
width: 700px;
border: 1px solid #6c8b40;
}
</style>
</head>
<body>
<div class="container">
<div class="child1"></div>
</div>
</body>
</html>如上面代码，是对页面属性的测试，结果如下图所示，通过颜色进行区分各个属性的功能，你需要做的只是在功能区填写css样式，就可以了：
1.2 详细设置
定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢？
伪类大家应该很熟悉
:link,:focus,:hover，此外CSS3中又增加了许多伪类选择器，如
:nth-child，:last-child，:nth-last-of-type()等。
CSS中的伪元素大家以前看过：
:first-line,:first-letter,:before,:after。那么在CSS3中，伪元素进行了调整，在以前的基础上增加了一个：也就是现在变成了
::first-letter,::first-line,::before,::after，另外CSS3还增加了一个
::selection。两个
：：和一个
：在css3中主要用来区分伪类和伪元素。
webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义，再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等。然后如果有些地方要用图片，可以把图片也可以转换成Base64，不然每次都得加载那个多个图片，增加请求数。
任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。
:horizontal //horizontal伪类适用于任何水平方向上的滚动条 :vertical //vertical伪类适用于任何垂直方向的滚动条 :decrement //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮 :increment //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮 :start //start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面 :end //end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面 :double-button //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。 :single-button //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。 :no-button no-button伪类表示轨道结束的位置没有按钮。 :corner-present //corner-present伪类表示滚动条的角落是否存在。 :window-inactive //适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。
上面就是对滚动条属性的详细设置，如下面代码，就是对伪类
:start的使用
::-webkit-scrollbar-track-piece:start {
/*滚动条上半边或左半边*/
width: 10px;
height: 10px;
border: 2px;
background: #d1a2d3;
}如下面代码，就是对伪类
:horizontal，:decrement，:hover的使用
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*当鼠标在水平滚动条递减属性的按钮上的状态，在该文件中就只有水平方向的第一个按钮*/
/* decrement 表示递减的碎片 */
width: 10px;
height: 10px;
border: 6px;
background: #d3150b;
}其他的使用可参见文章：https://www.cnblogs.com/520yang/articles/5098352.html
demo:http://www.xuanfengge.com/demo/201311/scroll/css3-scroll.html
二：IE下面的CSS设置滚动条
IE下面就比较简单那了，自定义的项目比较少，全是对颜色的设置。scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/ scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/ scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/ scrollbar-track-color: color; /*立体滚动条背景颜色*/ scrollbar-base-color:color; /*滚动条的基色*/
百度经验
三： 使用jquery进行自定义滚动条样式
为了一致的用户体验，有时我们就不得不放弃使用部分浏览器提供的CSS接口来定制滚动条，转而寻求更佳的代替方案。其中的一中方案是使用jQuery插件，jquery-custom-content-scroller。
要是您想了解jQuery-custom-content-scroller的具体使用方法，请移步到：
官网地址： http://manos.malihu.gr/jquery-custom-content-scroller/
github地址：github地址
下面我就jQuery滚动条插件的使用作一下简单介绍：
第一步：在内容的顶部引入滚动条相应的样式表文件和jquery的库文件，jquery插件jquery.mcustomscrollbar文件。
<link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.min.css" > <script src="./jquery-1.9.1.min.js"></script> <script src="./jquery.mCustomScrollbar.concat.min.js"></script>
第二步：在要显示滚动条的元素（元素内容中必须要有溢出的块，否则就不会出现滚动条）上面，加入class=”container”，然后再加入以下代码：
<script>
(function($){
$(window).load(function(){
$(".container").mCustomScrollbar(
{
axis:"yx", // horizontal scrollbar,设置水平和垂直
theme:"dark" //设置滚动条主题
}
);
});
})(jQuery);
</script>值得注意的是：在这里需要我们自己去下载jquery和其他要引入的插件
，当然最好的方法是下载链接处下载：
https://github.com/malihu/malihu-custom-scrollbar-plugin/archive/master.zip
在这个包里边包含了压缩和未压缩的插件包、插件css、jquery,只要复制到同一级文件下引入即可
完整代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.min.css" >
<script src="./jquery-1.9.1.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<style>
/*----*/
/* 定义div布局 */
.container {
height: 400px;
width: 300px;
border: 1px solid darkred;
overflow: auto;
}
.child1 {
height: 700px;
width: 700px;
border: 1px solid #6c8b40;
}
</style>
</head>
<script> (function($){ $(window).load(function(){ $(".container").mCustomScrollbar( { axis:"yx", // horizontal scrollbar,设置水平和垂直 theme:"dark" //设置滚动条主题 } ); }); })(jQuery); </script>
<body>
<div class="container">
<div class="child1"></div>
</div>
</body>
</html>
在火狐浏览器中效果如下所示：
在谷歌中如下所示：
从上面代码中我们可以看出，我们只需要通过给mCustomScrollbar
方法传递参数对象即可修改滚动条的样式，那么都有哪些配置呢？如下面介绍：
3.1 Configuration
你能够配置你的滚动条通过传递参数的方式，用法如下所示：
Usage $(selector).mCustomScrollbar({ option: value });| 语法 | 说明 |
|---|---|
| setWidth: false | 设置您的内容的宽度（覆盖CSS宽度），在像素值（整数）或百分比（字符串）。 |
| setHeight: false | 设置您的内容的高度（覆盖CSS高度），在像素值（整数）或百分比（字符串）。 |
| setTop: 0 | 设置内容的初始CSS顶级属性，接受字符串值（CSS顶部位置）。例如：置顶：“100px”。 |
| setLeft: 0 | 设置内容的初始CSS左属性，接受字符串值（CSS左位置）。例如：setleft：“100px”。 |
| axis: “string” | 定义内容的滚动轴（的滚动条类型添加到水平、垂直和/元素：）。有效值：“Y”、“X”、“Y”。 |
其他属性配置： http://manos.malihu.gr/jquery-custom-content-scroller/#configuration-section
3.2 Plugin methods
插件方法也有多个，比如
update
Usage $(selector).mCustomScrollbar(“update”);
调用Update方法手动更新现有的滚动条来容纳新的内容或调整大小的元素（S）。这种方法是通过默认的脚本自动调用（通过updateoncontentresize选项）当元素本身，其内容或滚动条大小的变化。
scrollTo
用法：$(selector).mCustomScrollbar(“scrollTo”,position);
你可以使用这个方法自动的滚动到你想要滚动到的位置。这个位置可以使用字符串（例如 “#element-id”，“bottom” 等）描述或者是一个数值（像素单位）。
下面的例子将会滚动到最下面的对象
$(“.content”).mCustomScrollbar(“scrollTo”,”last”);
scrollTo 方法的参数
$(selector).mCustomScrollbar(“scrollTo”,String); | 滚动到某个对象的位置，字符串型的值可以是 id 或者 class 的名字 $(selector).mCustomScrollbar(“scrollTo”,”top”); | 滚动到顶部（垂直滚动条） $(selector).mCustomScrollbar(“scrollTo”,”bottom”); | 滚动到底部（垂直滚动条） $(selector).mCustomScrollbar(“scrollTo”,”left”); | 滚动到最左边（水平滚动条） $(selector).mCustomScrollbar(“scrollTo”,”right”); | 滚动到最右边（水平滚动条 $(selector).mCustomScrollbar(“scrollTo”,”first”); | 滚动到内容区域中的第一个对象位置 $(selector).mCustomScrollbar(“scrollTo”,”last”); | 滚动到内容区域中的最后一个对象位置 $(selector).mCustomScrollbar(“scrollTo”,Integer); | 滚动到某个位置（像素单位）
scrollTo 方法还有两个额外的选项参数
moveDragger: Boolean | 滚动滚动条的滑块到某个位置像素单位，值：true，flase。
例如：
$(selector).mCustomScrollbar(“scrollTo”,200,{ moveDragger:true });callback：Boolean | 执行回调函数当 scroll-to 完成之后，值：true，false
例如：
$(selector).mCustomScrollbar(“scrollTo”,200,{ callback:true });disable
用法：$(selector).mCustomScrollbar(“disable”);
调用 disable 方法去使滚动条不可用。如果想使其重新可用，调用 update方法。disable 方法使用一个可选参数（默认 false）你可以设置 true 如果你想重新让内容区域滚动当 scrollbar 不可用时。
例如：
$(“.content”).mCustomScrollbar(“disable”,true);
destroy
用法：$(selector).mCustomScrollbar(“destroy”);
调用 destroy 方法可以移除某个对象的自定义滚动条并且恢复默认样式
3.3 Scrollbar styling & themes
当然，我们最注意的是样式的改变，如下面说明：
对于样式，我们既能够使用插件的样式，也能够进行自定义样式
######1）：使用插件本身的只需直接使用即可，如下面代码;
$(selector).mCustomScrollbar({
theme:"dark"
});具体的主题效果可以查看这里主题效果，然后将名称改变即可
######2）：自定义主题效果
如下所示创建主题
my-scroll-css.css并修改配置调用地方的主题名称。
$(selector).mCustomScrollbar({
theme:"my-scroll-css"
});在my-scroll-css.css样式中书写如下代码：
在使用的时候，需要将这个css样式导入到所使用的文件中
<link rel="stylesheet" type="text/css" href="my-scroll-css.css" >
.mCS-my-scroll-css.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: red; }
.mCS-my-scroll-css.mCSB_scrollTools .mCSB_draggerRail{ background-color: #93ff85; }如上面代码所示，在第一行中代码.mCS-my-scroll-css.mCSB_scrollTools中的
my-scroll-css就是我们自定义的主题名，也就是mCustomScrollbar中theme后面的值。
修改后效果如下所示：
同样，我们可以复制官方的样式进行自己的修改。
具体参数如下说明：
3.4 在其他框架中使用
安装
npm:
npm install malihu-custom-scrollbar-plugin
Bower:
bower install malihu-custom-scrollbar-plugin
如何使用
Manual:
$(selector).mCustomScrollbar();
Browserify:
var $ = require('jquery');
require('malihu-custom-scrollbar-plugin')($);webpack:
npm install imports-loader
npm install jquery-mousewheel
npm install malihu-custom-scrollbar-plugin
module.exports = {
module: {
loaders: [
{ test: /jquery-mousewheel/, loader: "imports?define=>false&this=>window" },
{ test: /malihu-custom-scrollbar-plugin/, loader: "imports?define=>false&this=>window" }
]
}
};
var $ = require('jquery');
require("jquery-mousewheel")($);
require('malihu-custom-scrollbar-plugin')($);要求：
jQuery version 1.6.0 or higher
浏览器兼容性
Internet Explorer 8+Firefox
Chrome
Opera
Safari
iOS
Android
Windows Phone
还有其他许多许多插件去修改滚动条：jquery自定义滚动条总结
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 修改浏览器滚动条样式
- 浏览器滚动条默认样式修改
- 修改浏览器滚动条样式的例子
- 修改浏览器滚动条样式
- 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试
- css3 修改默认滚动轴样式
- 灵活运用浏览器调试工具F12修改样式
- CSS3 DIY浏览器滚动条样式
- 更改浏览器滚动条样式（火狐改不了）
- css修改浏览器默认的滚动条样式
- 修改默认浏览器滚动条
- css设置浏览器滚动条样式
- 自定义浏览器滚动条样式
- 用CSS控制浏览器滚动条样式源代码
- 禁止用户选择文字，更改浏览器滚动条样式,去除浏览器自动填充背景
- 笔记：CSS改变webkit的浏览器滚动条样式
- 自定义webkit浏览器滚动条样式
- javascript基础（样式的操作，浏览器兼容样式操作，其他的样式相关属性，滚动的样式）（三十）
- input type="file"在各个浏览器下的默认样式，以及修改自定义样式
- 修改IE浏览器滚动条样式的一个实例