【转载】自定义滚动条样式

2023年6月20日发(作者：)

【转载】⾃定义滚动条样式CSS3⾃定义滚动条样式 -webkit-scrollbar有时候觉得浏览器⾃带的原始滚动条不是很美观，那webkit浏览器是如何⾃定义滚动条的呢？Webkit⽀持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条⾃定义样式。当然，兼容所有浏览器的滚动条样式⽬前是不存在的。滚动条的组成：::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条⾥⾯的⼩⽅块，能上下左右移动（取决于是垂直滚动条还是⽔平滚动条）::-webkit-scrollbar-track 滚动条的轨道（⾥⾯装有thumb）::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调⼩⽅块的位置::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-corner 边⾓，及两个滚动条的交汇处::-webkit-resizer 两个滚动条的交汇处上⽤于通过拖动调整元素⼤⼩的⼩控件⾃定义滚动条简单版：/*定义滚动条宽⾼及背景，宽⾼分别对应横竖滚动条的尺⼨*/.scrollbar::-webkit-scrollbar{ width: 16px; height: 16px; background-color: #f5f5f5;}/*定义滚动条的轨道，内阴影及圆⾓*/.scrollbar::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); border-radius: 10px; background-color: #f5f5f5;}/*定义滑块，内阴影及圆⾓*/.scrollbar::-webkit-scrollbar-thumb{ /*width: 10px;*/ height: 20px; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555;}前段时间，到⽹上找素材时，看到了⼀个很个性的滚动条式，打开Chrome的调试⼯具看了⼀下，发现不是⽤JavaScript来模拟实现的，觉得有必要折腾⼀下。于是在各⼤浏览器中对⽐了⼀下，发现只⽤Chrome适⽤，也就是说这个⽤的是Chrome的私有CSS属性。便百之⾕之后，发现原来不仅仅只⽤Chrome，其它的浏览器在不同程度上⽀持⾃定义滚动条样式的。下⾯是我不断测试的结果，若有错误或不全，请在评论⾥⾯给出，我会⽴马更正；若有更好的⽅案，你可以留⾔，让⼤家都开开眼界。。。。。。⾃定义IE浏览器滚动条样式追溯浏览器对滚动条的⾃定义，恐怕最早的就是IE浏览器了（好像最开始⽀持的版本是IE5.5）。下⾯列出了多个版本的⽀持性况：滚动条样式 ⽀持情况 ⽀持浏览器版本 可否继承 描述scrollbar-3dlight-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头左上边缘的颜⾊scrollbar-highlight-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头左上边缘的颜⾊scrollbar-face-color IE特有属性 IE5.5+ y 设置滚动框和滚动条箭头的颜⾊scrollbar-arrow-color IE特有属性 IE5.5+ y 设置滚动条箭头的颜⾊scrollbar-shadow-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头右下边缘的颜⾊scrollbar-dark-shadow-color IE特有属性 IE5.5+ y 设置滚动条槽的颜⾊scrollbar-base-color IE特有属性 IE5.5+ y 设置滚动条主要构成部分的颜⾊scrollbar-track-color IE特有属性 IE5.5+ y 设置滚动条轨迹组成部分的颜⾊这⾥写图⽚描述为了有助于理解IE中滚动条样式的控制，你可以查看如下的图⽚：这⾥写图⽚描述经过不断的测试发现，在Win8 下⾯，有⼀部分样式都起着相同的作⽤。估计是因为在Win8中扁平化的界⾯设计⽽重新定议了系统中滚动条！以下是Win 8下⾯的滚动条样式，并写出了和CSS⽀持的情况：这⾥写图⽚描述1.以上所写的⼏个四个CSS属性，⾜以控制Win 8系统下，IE浏览器的滚动条样式了。但经过测试，发现，其它的四个属性仍然⽀持（主要是在以上⼏个属性空缺时，就会体现其作⽤）。具体如下：2.关于scrollbar-track-color，scrollbar-face-color与scrollbar-base-color。直接看英语单词，你就也许能明⽩scroll-base-color是⼀个备⽤颜⾊，只要前两者未设置时，它就开始起作⽤了。但是你得注意，当scrollbar-base-color⽤来作scrollbar-track-color功能来⽤时，你会发现，实际颜⾊与设定的颜⾊要淡⼀点。不信你可以这样试试：只设置⼀下scrollbar-base-color看看滚动条的效果。关于scrollbar-dark-shadow-color属性，通过测试发现Win 8下IE10，IE11滚动条并没有改变。可能是win 8的滚动条重新定义了，导致没有了隐影了吧！（仅个⼈猜想）3.通过观察我们发现，Win 8下的滚动条中，上箭头和下箭头后⾯的背景颜⾊都已经从scroll-face-color中脱离出来了，从属于scroll-track-color属性控制。感觉IE浏览器滚动条⾃定制功能并不是很强，只能控制⼀样显⽰各个部分的颜⾊⽽已，像宽度，结构等都⽆法控制，要靠出个性点的滚动条，很难！很难⾃定义FireFox浏览器滚动条在⽹上找了很多关于Firfox⾃定义浏览器滚动条的⽅法，发现firefox中却实是不⽀持的。发现了⼏篇说可以更改，⾃已也跟着代码写了⼏次（不知是我错了还是。。。），发现却是不起作⽤。以下是⼀点⼩的收获：@-moz-document url-prefix(),url-prefix() {

/* 滚动条颜⾊ */

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;

}

}实测以上代码并不起作⽤。但也可能是我的浏览器的版本不对吧！你可以试试，要是有效的话，你可以把你的FF版本发表在⽂章评论⾥⾯。webkit内核的浏览器滚动条定制在所有浏览器，滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因，市⾯上基于webkit内核的浏览器也是很难穷举完。例如有：Google Chrome、Opera（opera最近宣布使⽤webkit内核了）、360极速浏览器，猎豹浏览器等，搜狗浏览器······下⾯我们来看⼀下webkit浏览器是如何强⼤的吧！ CSS ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webkit-scrollbar-track-piece { /* 4 */ } ::-webkit-scrollbar-thumb { /* 5 */ } ::-webkit-scrollbar-corner { /* 6 */ } ::-webkit-resizer { /* 7 */ }以上CSS代码所管辖的区域对就关系：以上注释中的数字与下图中数字相对应。这⾥写图⽚描述上图正如如下所⾔：::-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 定义右下⾓拖动块的样式注意：对以上各个部分定义width,height时。有如下功能：若是⽔平滚动条，则width属性不起作⽤，height属性⽤来控制滚动条相应部分竖直⽅向⾼度；若是竖直滚动条，则height属性不起作⽤，width属性⽤来控制相应部分的宽度。能过上⾯的不断的测试。在Chrome中，滚动条中的各个部分和DOM中块级元素是⼀样的。通过::-webkit-scrollbar等就类似于原来所说的CSS中的选择器。⽽{}中的属性，你就像控制⼀般块级元素⼀样简单（强⼤啊）。这⾥写图⽚描述对应的源代码如下：CSS部分代码：#scroll-1 { width:200px; height:200px; overflow:auto; } #scroll-1 div { width:400px; height:400px; } #scroll-1::-webkit-scrollbar { width:10px; height:10px; } #scroll-1::-webkit-scrollbar-button { background-color:#FF7677; } #scroll-1::-webkit-scrollbar-track { background:#FF66D5; } #scroll-1::-webkit-scrollbar-track-piece { background:url(/wp/wp-content/themes/mine/img/stripes_tiny_); } #scroll-1::-webkit-scrollbar-thumb{ background:#FFA711; border-radius:4px; } #scroll-1::-webkit-scrollbar-corner { background:#82AFFF; } #scroll-1::-webkit-scrollbar-resizer { background:#FF0BEE; }HTML结构：

:horizontal horizontal 伪类，主要应⽤于选择⽔平⽅向滚动条。:vertical vertical伪类主要是应⽤于选择竖直⽅向滚动条:decrement decrement伪类应⽤于按钮和内层轨道(track piece)。它⽤来指⽰按钮或者内层轨道是否会减⼩视窗的位置(⽐如，垂直滚动条的上⾯，⽔平滚动条的左边。):increment increment伪类与和decrement类似，⽤来指⽰按钮或内层轨道是否会增⼤视窗的位置(⽐如，垂直滚动条的下⾯和⽔平滚动条的右边。):start start伪类也应⽤于按钮和滑块。它⽤来定义对象是否放到滑块的前⾯。:end 类似于start伪类，标识对象是否放到滑块的后⾯。:double-button 该伪类可以⽤于按钮和内层轨道。⽤于判断⼀个按钮是不是放在滚动条同⼀端的⼀对按钮中的⼀个。对于内层轨道来说，它表⽰内层轨道是否紧靠⼀对按钮。:single-button 类似于double-button伪类。对按钮来说，它⽤于判断⼀个按钮是否⾃⼰独⽴的在滚动条的⼀段。对内层轨道来说，它表⽰内层轨道是否紧靠⼀个single-button。:no-button ⽤于内层轨道，表⽰内层轨道是否要滚动到滚动条的终端，⽐如，滚动条两端没有按钮的时候。:corner-present ⽤于所有滚动条轨道，指⽰滚动条圆⾓是否显⽰。:window-inactive ⽤于所有的滚动条轨道，指⽰应⽤滚动条的某个页⾯容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以⽤于::selection伪元素。webkit团队有计划扩展它并推动成为⼀个标准的伪类)另外，:enabled、:disabled、:hover、和:active等伪类同样在滚动条中适⽤。下⾯我⾃已尝试着去写的DEMO，不要嫌它太丑就好。三国平分，终归⼀统为了⼀致的⽤户体验，有时我们就不得不放弃使⽤部分浏览器提供的CSS接⼝来定制滚动条，转⽽寻求更佳的代替⽅案。下⾯我就jQuery滚动条插件的使⽤作⼀下简单介绍：第⼀步：在内容的顶部引⼊滚动条相应的样式表⽂件和jquery的库⽂件，jquery插件mscrollbar⽂件。代码如下：第⼆步：在要显⽰滚动条的元素（元素内容中必须要有溢出的块，否则就不会出现滚动条）上⾯，加⼊class=”content”，然后再加⼊以下代码：关于此插件的详细介绍，你可以访问官⽹，⾥⾯讲的相当详细，我就不再此多赘述。

2023年6月20日发(作者：)

【转载】⾃定义滚动条样式CSS3⾃定义滚动条样式 -webkit-scrollbar有时候觉得浏览器⾃带的原始滚动条不是很美观，那webkit浏览器是如何⾃定义滚动条的呢？Webkit⽀持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条⾃定义样式。当然，兼容所有浏览器的滚动条样式⽬前是不存在的。滚动条的组成：::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条⾥⾯的⼩⽅块，能上下左右移动（取决于是垂直滚动条还是⽔平滚动条）::-webkit-scrollbar-track 滚动条的轨道（⾥⾯装有thumb）::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调⼩⽅块的位置::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-corner 边⾓，及两个滚动条的交汇处::-webkit-resizer 两个滚动条的交汇处上⽤于通过拖动调整元素⼤⼩的⼩控件⾃定义滚动条简单版：/*定义滚动条宽⾼及背景，宽⾼分别对应横竖滚动条的尺⼨*/.scrollbar::-webkit-scrollbar{ width: 16px; height: 16px; background-color: #f5f5f5;}/*定义滚动条的轨道，内阴影及圆⾓*/.scrollbar::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); border-radius: 10px; background-color: #f5f5f5;}/*定义滑块，内阴影及圆⾓*/.scrollbar::-webkit-scrollbar-thumb{ /*width: 10px;*/ height: 20px; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555;}前段时间，到⽹上找素材时，看到了⼀个很个性的滚动条式，打开Chrome的调试⼯具看了⼀下，发现不是⽤JavaScript来模拟实现的，觉得有必要折腾⼀下。于是在各⼤浏览器中对⽐了⼀下，发现只⽤Chrome适⽤，也就是说这个⽤的是Chrome的私有CSS属性。便百之⾕之后，发现原来不仅仅只⽤Chrome，其它的浏览器在不同程度上⽀持⾃定义滚动条样式的。下⾯是我不断测试的结果，若有错误或不全，请在评论⾥⾯给出，我会⽴马更正；若有更好的⽅案，你可以留⾔，让⼤家都开开眼界。。。。。。⾃定义IE浏览器滚动条样式追溯浏览器对滚动条的⾃定义，恐怕最早的就是IE浏览器了（好像最开始⽀持的版本是IE5.5）。下⾯列出了多个版本的⽀持性况：滚动条样式 ⽀持情况 ⽀持浏览器版本 可否继承 描述scrollbar-3dlight-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头左上边缘的颜⾊scrollbar-highlight-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头左上边缘的颜⾊scrollbar-face-color IE特有属性 IE5.5+ y 设置滚动框和滚动条箭头的颜⾊scrollbar-arrow-color IE特有属性 IE5.5+ y 设置滚动条箭头的颜⾊scrollbar-shadow-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头右下边缘的颜⾊scrollbar-dark-shadow-color IE特有属性 IE5.5+ y 设置滚动条槽的颜⾊scrollbar-base-color IE特有属性 IE5.5+ y 设置滚动条主要构成部分的颜⾊scrollbar-track-color IE特有属性 IE5.5+ y 设置滚动条轨迹组成部分的颜⾊这⾥写图⽚描述为了有助于理解IE中滚动条样式的控制，你可以查看如下的图⽚：这⾥写图⽚描述经过不断的测试发现，在Win8 下⾯，有⼀部分样式都起着相同的作⽤。估计是因为在Win8中扁平化的界⾯设计⽽重新定议了系统中滚动条！以下是Win 8下⾯的滚动条样式，并写出了和CSS⽀持的情况：这⾥写图⽚描述1.以上所写的⼏个四个CSS属性，⾜以控制Win 8系统下，IE浏览器的滚动条样式了。但经过测试，发现，其它的四个属性仍然⽀持（主要是在以上⼏个属性空缺时，就会体现其作⽤）。具体如下：2.关于scrollbar-track-color，scrollbar-face-color与scrollbar-base-color。直接看英语单词，你就也许能明⽩scroll-base-color是⼀个备⽤颜⾊，只要前两者未设置时，它就开始起作⽤了。但是你得注意，当scrollbar-base-color⽤来作scrollbar-track-color功能来⽤时，你会发现，实际颜⾊与设定的颜⾊要淡⼀点。不信你可以这样试试：只设置⼀下scrollbar-base-color看看滚动条的效果。关于scrollbar-dark-shadow-color属性，通过测试发现Win 8下IE10，IE11滚动条并没有改变。可能是win 8的滚动条重新定义了，导致没有了隐影了吧！（仅个⼈猜想）3.通过观察我们发现，Win 8下的滚动条中，上箭头和下箭头后⾯的背景颜⾊都已经从scroll-face-color中脱离出来了，从属于scroll-track-color属性控制。感觉IE浏览器滚动条⾃定制功能并不是很强，只能控制⼀样显⽰各个部分的颜⾊⽽已，像宽度，结构等都⽆法控制，要靠出个性点的滚动条，很难！很难⾃定义FireFox浏览器滚动条在⽹上找了很多关于Firfox⾃定义浏览器滚动条的⽅法，发现firefox中却实是不⽀持的。发现了⼏篇说可以更改，⾃已也跟着代码写了⼏次（不知是我错了还是。。。），发现却是不起作⽤。以下是⼀点⼩的收获：@-moz-document url-prefix(),url-prefix() {

/* 滚动条颜⾊ */

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;

}

}实测以上代码并不起作⽤。但也可能是我的浏览器的版本不对吧！你可以试试，要是有效的话，你可以把你的FF版本发表在⽂章评论⾥⾯。webkit内核的浏览器滚动条定制在所有浏览器，滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因，市⾯上基于webkit内核的浏览器也是很难穷举完。例如有：Google Chrome、Opera（opera最近宣布使⽤webkit内核了）、360极速浏览器，猎豹浏览器等，搜狗浏览器······下⾯我们来看⼀下webkit浏览器是如何强⼤的吧！ CSS ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webkit-scrollbar-track-piece { /* 4 */ } ::-webkit-scrollbar-thumb { /* 5 */ } ::-webkit-scrollbar-corner { /* 6 */ } ::-webkit-resizer { /* 7 */ }以上CSS代码所管辖的区域对就关系：以上注释中的数字与下图中数字相对应。这⾥写图⽚描述上图正如如下所⾔：::-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 定义右下⾓拖动块的样式注意：对以上各个部分定义width,height时。有如下功能：若是⽔平滚动条，则width属性不起作⽤，height属性⽤来控制滚动条相应部分竖直⽅向⾼度；若是竖直滚动条，则height属性不起作⽤，width属性⽤来控制相应部分的宽度。能过上⾯的不断的测试。在Chrome中，滚动条中的各个部分和DOM中块级元素是⼀样的。通过::-webkit-scrollbar等就类似于原来所说的CSS中的选择器。⽽{}中的属性，你就像控制⼀般块级元素⼀样简单（强⼤啊）。这⾥写图⽚描述对应的源代码如下：CSS部分代码：#scroll-1 { width:200px; height:200px; overflow:auto; } #scroll-1 div { width:400px; height:400px; } #scroll-1::-webkit-scrollbar { width:10px; height:10px; } #scroll-1::-webkit-scrollbar-button { background-color:#FF7677; } #scroll-1::-webkit-scrollbar-track { background:#FF66D5; } #scroll-1::-webkit-scrollbar-track-piece { background:url(/wp/wp-content/themes/mine/img/stripes_tiny_); } #scroll-1::-webkit-scrollbar-thumb{ background:#FFA711; border-radius:4px; } #scroll-1::-webkit-scrollbar-corner { background:#82AFFF; } #scroll-1::-webkit-scrollbar-resizer { background:#FF0BEE; }HTML结构：

:horizontal horizontal 伪类，主要应⽤于选择⽔平⽅向滚动条。:vertical vertical伪类主要是应⽤于选择竖直⽅向滚动条:decrement decrement伪类应⽤于按钮和内层轨道(track piece)。它⽤来指⽰按钮或者内层轨道是否会减⼩视窗的位置(⽐如，垂直滚动条的上⾯，⽔平滚动条的左边。):increment increment伪类与和decrement类似，⽤来指⽰按钮或内层轨道是否会增⼤视窗的位置(⽐如，垂直滚动条的下⾯和⽔平滚动条的右边。):start start伪类也应⽤于按钮和滑块。它⽤来定义对象是否放到滑块的前⾯。:end 类似于start伪类，标识对象是否放到滑块的后⾯。:double-button 该伪类可以⽤于按钮和内层轨道。⽤于判断⼀个按钮是不是放在滚动条同⼀端的⼀对按钮中的⼀个。对于内层轨道来说，它表⽰内层轨道是否紧靠⼀对按钮。:single-button 类似于double-button伪类。对按钮来说，它⽤于判断⼀个按钮是否⾃⼰独⽴的在滚动条的⼀段。对内层轨道来说，它表⽰内层轨道是否紧靠⼀个single-button。:no-button ⽤于内层轨道，表⽰内层轨道是否要滚动到滚动条的终端，⽐如，滚动条两端没有按钮的时候。:corner-present ⽤于所有滚动条轨道，指⽰滚动条圆⾓是否显⽰。:window-inactive ⽤于所有的滚动条轨道，指⽰应⽤滚动条的某个页⾯容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以⽤于::selection伪元素。webkit团队有计划扩展它并推动成为⼀个标准的伪类)另外，:enabled、:disabled、:hover、和:active等伪类同样在滚动条中适⽤。下⾯我⾃已尝试着去写的DEMO，不要嫌它太丑就好。三国平分，终归⼀统为了⼀致的⽤户体验，有时我们就不得不放弃使⽤部分浏览器提供的CSS接⼝来定制滚动条，转⽽寻求更佳的代替⽅案。下⾯我就jQuery滚动条插件的使⽤作⼀下简单介绍：第⼀步：在内容的顶部引⼊滚动条相应的样式表⽂件和jquery的库⽂件，jquery插件mscrollbar⽂件。代码如下：第⼆步：在要显⽰滚动条的元素（元素内容中必须要有溢出的块，否则就不会出现滚动条）上⾯，加⼊class=”content”，然后再加⼊以下代码：关于此插件的详细介绍，你可以访问官⽹，⾥⾯讲的相当详细，我就不再此多赘述。