文章目录
首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

css3 自定义浏览器滚动条(scrollbar)

2019年01月28日 发布 阅读(289) 作者:懒炖

通过-webkit-scrollbar自定义浏览器滚动条,支持webkit的浏览器可正常显示(如chrome,safari,QQ浏览器,360极速等)。

很惊讶firefox还没有使用webkit内核,可能切换的成本太高吧。另外firefox暂时也不允许自定义滚动条~

关于-webkit-scrollbar

-webkit-scrollbar由7个伪元素组成,共同构成一个滚动条

先通过一张图看一下,滚动条的各个部分

  • ::-webkit-scrollbar 整个滚动条的背景
  • ::-webkit-scrollbar-button 滚动条上方或下方的按钮,单击可上下滚动(横向滚动条单击可左右滚动)
  • ::-webkit-scrollbar-track 滚动条轨道
  • ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分
  • ::-webkit-scrollbar-thumb 滚动条上的滚动滑块
  • ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分.
  • ::-webkit-resizer 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

浏览器兼容

https://www.caniuse.com/#search=scrollbar

参考实现

本站的实现代码,是不是很简单?

  1. /* scrollbar */
  2. html::-webkit-scrollbar {
  3. width: 20px;
  4. height: 20px;
  5. }
  6. html::-webkit-scrollbar-thumb {
  7. background: -webkit-gradient(
  8. linear,
  9. left top,
  10. left bottom,
  11. from(#ddd),
  12. to(#42b8dd)
  13. );
  14. background: linear-gradient(to bottom, #ddd, #42b8dd);
  15. border-radius: 20px;
  16. /* -webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25),
  17. inset -2px -2px 2px rgba(0, 0, 0, 0.25); */
  18. /* box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25),
  19. inset -2px -2px 2px rgba(0, 0, 0, 0.25); */
  20. }
  21. html::-webkit-scrollbar-track {
  22. background: #ddd;
  23. }

demo

https://codepen.io/akinjide/pen/BpggrZ

可能适用滚动条的一些伪类元素

  1. :horizontal
  2. //horizontal伪类适用于任何水平方向上的滚动条
  3. :vertical
  4. //vertical伪类适用于任何垂直方向的滚动条
  5. :decrement
  6. //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮
  7. :increment
  8. //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮
  9. :start
  10. //start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面
  11. :end
  12. //end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面
  13. :double-button
  14. //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
  15. :single-button
  16. //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
  17. :no-button
  18. no-button伪类表示轨道结束的位置没有按钮。
  19. :corner-present
  20. //corner-present伪类表示滚动条的角落是否存在。
  21. :window-inactive
  22. //适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。
  23. ::-webkit-scrollbar-track-piece:start {
  24. /*滚动条上半边或左半边*/
  25. }
  26. ::-webkit-scrollbar-thumb:window-inactive {
  27. /*当焦点不在当前区域滑块的状态*/
  28. }
  29. ::-webkit-scrollbar-button:horizontal:decrement:hover {
  30. /*当鼠标在水平滚动条下面的按钮上的状态*/
  31. }

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar
https://scotch.io/tutorials/customize-the-browsers-scrollbar-with-css
https://blog.csdn.net/byc233518/article/details/78469547

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •