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")
上一篇:css 自定义滚动条样式


下一篇:前端常见浏览器兼容性问题解决方案