CSS自定义浏览器滚动条样式

2018年5月2日20:00:52 4 阅读(3,453)
本文最后更新于2018年9月12日,已超过一年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
摘要

浏览器滚动条可以自定义为你喜欢的样式,但是不同内核的浏览器显示,要用不同的方法,本文主要介绍Trident内核的浏览器和webkit内核的浏览器,浏览器代表:Internet Explorer和Google Chrome。

滚动条伪元素指示对象应该使用自定义滚动条。当这个伪元素存在时,将关闭其内置的滚动条渲染,并使用CSS中提供的信息。

代码如下:

  1. /*Trident内核滚动条样式--start*/
  2. body{
  3.     scrollbar-arrow-colorred/*上下按钮上三角箭头的颜色*/
  4.     scrollbar-face-color#CBCBCB/*滚动条凸出部分的颜色*/
  5.     scrollbar-3dlight-colorblue/*滚动条亮边的颜色*/
  6.     scrollbar-highlight-color#333/*滚动条空白部分的颜色*/
  7.     scrollbar-shadow-coloryellow/*滚动条阴影的颜色*/
  8.     scrollbar-darkshadow-colorgreen/*滚动条强阴影的颜色*/
  9.     scrollbar-track-color#ff0000/*滚动条背景颜色*/
  10.     scrollbar-base-colorblack/*滚动条的基本颜色*/
  11. }
  12. /*Trident内核滚动条样式--end*/
  13. /*webkit内核滚动条样式--start*/
  14. ::-webkit-scrollbar {  /* 竖直方向滚动条整体部分 */
  15.     width:10px;
  16.     margin-right:2px;
  17. }
  18. ::-webkit-scrollbar-button { /* 滚动条两端的按钮 */
  19.     width:10px;
  20.     background-colorblack;
  21. }
  22. ::-webkit-scrollbar:horizontal { /*水平方向滚动条整体部分*/
  23.     height:10px;
  24.     margin-bottom:2px
  25. }
  26. ::-webkit-scrollbar-track {  /* 外层轨道 */
  27.     border-radius: 10px;
  28. }
  29. ::-webkit-scrollbar-track-piece {  /*内层轨道,滚动条中间部分 */
  30.     background-colorblue;
  31.     border-radius: 10px;
  32. }
  33. ::-webkit-scrollbar-thumb {  /* 滑块 */
  34.     width:10px;
  35.     border-radius: 5px;
  36.     background#BFEFFF;
  37. }
  38. ::-webkit-scrollbar-corner { /* 边角 */
  39.     width10px;
  40.     background-colorred;
  41. }
  42. ::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
  43.     background#8968CD;
  44. }
  45. /*webkit内核滚动条样式--end*/

效果如图:

Google Chrome浏览器

CSS自定义浏览器滚动条样式

Internet Explorer浏览器

CSS自定义浏览器滚动条样式

通过以上,我们就可以DIY自己的浏览器滚动条了。但是webkit提供了更多的伪类,大大丰富了滚动条样式。

所有这些伪元素都必须以前缀-webkit-.

以下内容参考:https://webkit.org/blog/363/styling-scrollbars/

  • :vertical - 垂直伪类适用于任何垂直方向的滚动条。
  • :decrement - 递减伪类适用于按钮和曲目片段。它指示按钮或轨道片段在使用时是否将递减视图的位置(例如,在垂直滚动条上,左侧水平滚动条上)。
  • :increment - 增量伪类应用于按钮和曲目片段。它指示按钮或轨道片段在使用时是否将增加视图的位置(例如,在垂直滚动条上,在水平滚动条上的右边)。
  • :start - 开始伪类适用于按钮和轨道片段。它指示对象是否放在拇指之前。
  • :end - 结束伪类适用于按钮和曲目片段。它指示对象是否放在拇指后面。
  • :double-button - 双按钮伪类应用于按钮和曲目片段。它用于检测按钮是否位于滚动条同一端的一对按钮的一部分。对于轨道部件,它指示轨道部件是否邻接一对按钮。
  • :single-button - 单按钮伪类适用于按钮和跟踪片段。它用于检测按钮本身是否在滚动条的末尾。对于轨道片段,它指示轨道片段是否邻接单个按钮。
  • :no-button - 适用于跟踪棋子并指示棋子是否跑到滚动条的边缘,即在棋子的那一端没有按钮。
  • :corner-present - 适用于所有滚动条,并指示滚动条角是否存在。
  • :window-inactive - 适用于所有滚动条,并指示包含滚动条的窗口当前是否处于活动状态。(这个伪类现在也适用于:: selection,我们计划扩展它以处理任何内容,并将其作为新的标准伪类提出来。)另外:enabled,:disabled,:hover和:active伪类也可用于滚动条。显示属性可以设置为无,以隐藏特定的部分。

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论:4   其中:访客  2   博主  2

    • 挚爱.scy 挚爱.scy 0

      你怎么这么有才

      • 憧憬点滴记忆 憧憬点滴记忆 1

        还是可以的,这个样子界面就好看多了