css - 滚动条样式 - webkit-scrollbar
css - 滚动条样式 - webkit-scrollbar
浏览器兼容
火狐下的滚动条样式无法去修改，但chorme下的则可以任意修改，惊喜的是IE竟然是最早实现这一功能的浏览器，IE5都能有效果。
IE下的滚动条样式修改跟chrome下的不一样，而且只能修改颜色。
CSS滚动条选择器
可以使用以下伪元素选择器去修改各式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
定义右下角拖动块的样式.
某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
IE支持插件
首先引入JQuery库，再引入zUI.js这个插件，
写入你自己修改的样式代码（这个选择器应该是插件中可识别的，不是很懂，但能用）：
.zUIpanelScrollBox,.zUIpanelScrollBar{
width:10px;
top:4px;
right:2px;
border-radius:5px;
}
.zUIpanelScrollBox{
background:black;opacity:0.1;
filter:alpha(opacity=10);
}
.zUIpanelScrollBar{
background:red;opacity:0.8;
filter:alpha(opacity=80);
}
最后对插件进行初始化即可
$(function(){
$("#scroll-1").panel({iWheelStep:32});
});
// iWheelStep:32；滚动条滚动的速度，可修改。
火狐的暂时还没有兼容到，后期学习到再补上。
vue使用zui.js的方法
zui不支持import的方式引入，vue本身是一个封闭环境，不能被获取，zui依赖于jQuery，要用到$ jQuery window.jQuery 三个变量，所以解决方法是:
// webpack.config.js
resolve: {
alias: {
'jquery': path.resolve(__dirname, './src/lib/jquery.min.js')
}
},
new webpack.ProvidePlugin({
jQuery: "jquery"
$:"jquery"
})
// main.js
window.jQuery=jQuery //此处尤为重要
require("./zui.min.js")
Lee2
