适用于webkit的自定义浏览器样式

Author： Lindo
发布时间：August 17, 2020
784 views
No comments
2604 words
Categories： FrontEnd

前言： 现在越来越要求“表面功夫”了，几乎所有的手机端浏览器的滚动条都是Mini版本，近些年来，部分PC端的前端页面的滚动条也开始变得妖艳贱货了起来。这里做下记录方便个人查看

----------

必须为webkit内核，即样式前缀需支持-webkit-,
也可配合css选择使用，若不搭配使用，则为全局样式
</div>

tips:我们可以为这些对象中的每个对象设置边框，阴影，背景图像等样式，以创建完全自定义的滚动条，当然，且没有疑惑这些滚动条在按钮位置和单击行为方面仍将遵循操作系统的设置。
</div>

另外，引入了以下伪类并将其应用于伪元素。

`:horizontal` –水平伪类适用于任何具有水平方向的滚动条。

`:vertical` –垂直伪类适用于任何具有垂直方向的滚动条。

`:decrement`–减量伪类适用于按钮和轨道块。它指示按钮或轨道块在使用时是否会降低视图的位置（例如，在垂直滚动条上向上，在水平滚动条上左侧）。

`:increment`–增量伪类适用于按钮和跟踪片段。它指示按钮或轨迹块在使用时是否会增加视图的位置（例如，在垂直滚动条上向下，在水平滚动条上右侧）。

`:start– start`伪类适用于按钮和跟踪片段。它指示对象是否放置在拇指之前。

`:end`–结束伪类适用于按钮和跟踪片段。它指示对象是否放置在拇指后面。

`:double-button`–双按钮伪类适用于按钮和轨道块。它用于检测一个按钮是否是位于滚动条同一端的一对按钮的一部分。对于履带板，它指示履带板是否邻接一对按钮。

`:single-button`–单按钮伪类适用于按钮和轨道块。它用于检测按钮是否位于滚动条末尾。对于履带板，它指示履带板是否邻接单例按钮。

`:no-button` –适用于曲目片断，并指示曲目片断是否延伸到滚动条的边缘，即，曲目的那端没有按钮。

`:corner-present` –适用于所有滚动条，并指示是否存在滚动条角。

`:window-inactive`–适用于所有滚动条，并指示包含滚动条的窗口当前是否处于活动状态。（在最近的夜间，此伪类现在也适用于:: selection。我们计划将其扩展为可处理任何内容，并将其提议为新的标准伪类。）

此外，：enabled，：disabled，：hover和：active伪类也可以与滚动条一起使用。

可以将display属性设置为none，以便隐藏特定的作品。

沿滚动条的轴支持边距。它们可以是负数（例如，可以使轨道膨胀以部分覆盖按钮）。

举个例子：

```
::-webkit-scrollbar:vertical {
  -webkit-border-image: url(resources/vertical-button.png) 2 0 2 0;
  border-color: transparent;
  border-width: 2px 0;
  background-image: url(resources/vertical-button-background.png);
  background-repeat: repeat-y;
}

::-webkit-scrollbar-track-piece:disabled {
  display: none !important;
}

::-webkit-scrollbar-track:vertical:disabled {
  -webkit-border-image: url(resources/vertical-track-disabled.png) 13 0 13 0;
  border-color: transparent;
  border-width: 13px 0;
}

/** 或者 **/
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

```

[样式滚动条][1]

[1]: https://webkit.org/blog/363/styling-scrollbars/

Last modification：November 17, 2020

如果觉得文章对你有所收获，可以请笔者喝杯咖啡

适用于webkit的自定义浏览器样式

Lindo • 2020 年 08 月 17 日

----------

必须为webkit内核，即样式前缀需支持-webkit-,
也可配合css选择使用，若不搭配使用，则为全局样式
</div>

另外，引入了以下伪类并将其应用于伪元素。

`:horizontal` –水平伪类适用于任何具有水平方向的滚动条。

`:vertical` –垂直伪类适用于任何具有垂直方向的滚动条。

`:start– start`伪类适用于按钮和跟踪片段。它指示对象是否放置在拇指之前。

`:end`–结束伪类适用于按钮和跟踪片段。它指示对象是否放置在拇指后面。

`:single-button`–单按钮伪类适用于按钮和轨道块。它用于检测按钮是否位于滚动条末尾。对于履带板，它指示履带板是否邻接单例按钮。

`:no-button` –适用于曲目片断，并指示曲目片断是否延伸到滚动条的边缘，即，曲目的那端没有按钮。

`:corner-present` –适用于所有滚动条，并指示是否存在滚动条角。

此外，：enabled，：disabled，：hover和：active伪类也可以与滚动条一起使用。

可以将display属性设置为none，以便隐藏特定的作品。

沿滚动条的轴支持边距。它们可以是负数（例如，可以使轨道膨胀以部分覆盖按钮）。

举个例子：

::-webkit-scrollbar-track-piece:disabled {
  display: none !important;
}

::-webkit-scrollbar-track:vertical:disabled {
  -webkit-border-image: url(resources/vertical-track-disabled.png) 13 0 13 0;
  border-color: transparent;
  border-width: 13px 0;
}

```

[样式滚动条][1]

[1]: https://webkit.org/blog/363/styling-scrollbars/

适用于webkit的自定义浏览器样式

Leave a Comment Cancel reply

关于毕业的一些小问题

昆承湖畔

博客小目标终结

临近毕业的随想

handsome主题音乐插件启动失败

永劫无间·胡桃·三排攻略

从BOSS设计分析FF14为什么这么好玩（下）

一个关于谷歌浏览器与其他浏览器图片显示有差异的问题

在Angular中使用RxJS完成接口数据的缓存

关于Typeecho出现Database Query Error 问题的汇总

适用于webkit的自定义浏览器样式