站内搜索:
首页 >> 前端 >> 内容
CSS自定义滚动条

时间:2016/8/8 9:33:34

最强大的滚动条插件【使用jQuery插件,jquery-custom-content-scroller】:https://www.jq22.com/jquery-info124

在所有浏览器,滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因,市面上基于webkit内核的浏览器也是很难穷举完。例如有:Google Chrome、Opera(opera最近宣布使用webkit内核了)、360极速浏览器,猎豹浏览器等,搜狗浏览器······

下面我们来看一下webkit浏览器是如何强大的吧!

复制
  1. CSS
  2. ::-webkit-scrollbar { /* 1 */ }
  3. ::-webkit-scrollbar-button { /* 2 */ }
  4. ::-webkit-scrollbar-track { /* 3 */ }
  5. ::-webkit-scrollbar-track-piece { /* 4 */ }
  6. ::-webkit-scrollbar-thumb { /* 5 */ }
  7. ::-webkit-scrollbar-corner { /* 6 */ }
  8. ::-webkit-resizer { /* 7 */ }

以上CSS代码所管辖的区域对就关系:以上注释中的数字与下图中数字相对应。

CSS自定义滚动条

上图正如如下所言:

  • 上一篇:[AngularJS面面观]17.依赖注入---注解的定义与实现
  • 下一篇:随笔之——各大热门网站search 搜索框的写法,浅析
  • 返回顶部