css增加横着滚动条_CSS 设置滚动条样式的实现「建议收藏」

webkit滚动条样式重置1、scrollbar包含scrollbarbuttons和一个track。track进一步细分为trackpieces和thumb。tracepieces为thumb的上半部分和半下部分。2、scrollbarcorner为横向和竖向的交叉角区域3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件组成结构图如下:一旦发现滚动条的自定义样式,浏览器…

大家好,又见面了,我是你们的朋友全栈君。

webkit滚动条样式重置

1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。

2、scrollbar corner为横向和竖向的交叉角区域

3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件

组成结构图如下:

css增加横着滚动条_CSS 设置滚动条样式的实现「建议收藏」

一旦发现滚动条的自定义样式,浏览器的默认样式设置将会失效,只使用在css定义的样式。也就意味值不能单独只设置scrollbar button或scrollbar track。

-webkit-scrollbar /* 滚动条整体部分,重置时必须要设置 */

-webkit-scrollbar-button /* 滚动条的轨道的两端按钮 */

-webkit-scrollbar-track /* 滚动条的轨道(包含thumb和trace-piece)*/

-webkit-scrollbar-track-piece /* 轨道中下方块的上下(左右)部分*/

-webkit-scrollbar-thumb /*滚动条里面的小方块*/

-webkit-scrollbar-corner /* 垂直和水平的交叉角 */

-webkit-resize // 滚动条的交汇处上用于拖动调整元素大小的小控件 */

可以结合以下伪类进行设置(不同的操作系统浏览器滚动条可能不一样,所有可以根据下面伪类来设置):

:horizontal 水平方向的track、track-piect、thumb

:vertica 垂直方向的track、track-piect、thumb

:decrement 向上和向左按钮的button、向上或向左的track-piece

:increment 向下和向右按钮的button、向下和向右的track-piece

:start 适用于buttons和track pieces,对象(buttons 或 trace piece)是否放在滑块的前面

:end 适用于buttons和track pieces,对象(buttons 或 trace piece)是否放在滑块的后面

:double-button 适用于buttons和track pieces,轨道结束的位置是否是一对按钮

:single-button 适用于buttons和track pieces,轨道结束的位置是否是一个按钮

:no-button 适用于track pieces,轨道结束的位置没有按钮

:corner-present 适用于所有scrollbar,滚动条的角落是否存在

:window-inactive 适用于所有scrollbar,包含滚动条的区域,焦点不在该窗口的时候

:enabled, :disabled, :hover , :active 这些伪类同样适用

IE中只能修改滚动条颜色

scrollbar-arrow-color:#f2f2f3; /*上下箭头*/

scrollbar-track-color /*底层背景色*/

scrollbar-face-color /*滚动条前景色,对应thumb*/

scrollbar-shadow-color /*滚动条边线色,thubm的border*/

scrollbar-highlight-color /*滚动条整体颜色*/

scrollbar-base-color /* 滚动条基准颜色 */

参考资料

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/126637.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • mina框架分析:总体结构分析[通俗易懂]

    MINAbasedApplicationArchitectureIt’sthequestionmostasked:’Howdoesa MINA basedapplicationlooklike’?Inthisarticleletsseewhat’sthearchitectureofMINAbasedapplication.Havetr

  • 修改 nginx 的默认端口「建议收藏」

    修改 nginx 的默认端口「建议收藏」nginx安装的时候有一个坑,需要注意,那就是默认端口号配置的是80.大家知道iis里面的服务默认也是80.如果是在windows服务里面安装的话,之前已经有iis。那么你就会报错。报端口号被占用。具体英文忘记了怎么写。这个时候,2种方法,一修改nginx的配置文件,不让他用80端口号。这是最好的方法。修改文件:找到nginx压缩文件:nginx不需要做任何的安装,在他的官网上下载后,直接解压后出现如下图就ok。我的另外一篇文章有具体操作,可以去看。打开conf,找到ngin..

  • 批量修改某一文件夹所有文件名

    批量修改某一文件夹所有文件名

    2021年11月17日
  • Aliyun平台Nginx+Mysql+Redis部署easyboot

    Aliyun平台Nginx+Mysql+Redis部署easyboot注册阿里云,免费申领一台云服务器地址https://free.aliyun.com/?spm=5176.10695662.7708050970.1.28142c4fKrKBP8新人特惠-购买一台云服务器ECShttps://www.aliyun.com/activity/new?spm=5176.12901015.d71.d71.4ea4525cvsDqbO&scm=20140722.3873.7.3972安装jdk,配置环境变量下载,上传jdk-8u202-linux-x64.t

  • java集合介绍_java代码分析框架

    java集合介绍_java代码分析框架概述HashMap是Map接口下一个线程不安全的,基于哈希表的实现类。由于他解决哈希冲突的方式是分离链表法,也就是拉链法,因此他的数据结构是数组+链表,在JDK8以后,当哈希冲突严重时,H

  • Hmily(3)

    Hmily(3)5.提供端的方法也需要Hmily注解,当然也会有确认取消方法,执行切面方法DubboHmilyTransactionInterceptor#interceptor这个时候的context不会为空,转成对象HmilyTransactionContext,HmilyTransactionAspectServiceImpl#invoke找出合适的处理类HmilyTransactionFactorySe…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号