css - 滚动条样式 - webkit-scrollbar

css - 滚动条样式 - webkit-scrollbar

-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")