首页 > 其他分享 >自定义滚动条样式不生效:横轴设置 height,纵轴设置 width

自定义滚动条样式不生效:横轴设置 height,纵轴设置 width

时间:2022-08-25 15:00:41浏览次数:59  
标签:自定义 deep height 滚动条 width scrollbar 设置 webkit

问题

在修改滚动条样式时,两个类名,一个地方生效,另一个地方不生效。

解决办法

捣鼓很久才发现,原来横轴要设置 height,纵轴要设置 width

  // 滚动条的样式,高宽分别对应横竖滚动条的尺寸
  ::v-deep .lib-table::-webkit-scrollbar, ::v-deep .pagination-container::-webkit-scrollbar  {
    width: 5px; // 纵向滚动条的粗度
    height: 5px; // // 横向滚动条的粗度
    padding-right: 30px;
  }

  // 滚动条里默认的小方块,自定义样式
  ::v-deep .lib-table::-webkit-scrollbar-thumb, ::v-deep .pagination-container::-webkit-scrollbar-thumb  {
    background: #c1c1c1;
    border-radius: 2px;
  }

  // 滚动条里的轨道
  ::v-deep .lib-table::-webkit-scrollbar-track, ::v-deep .pagination-container::-webkit-scrollbar-track {
    background: transparent;
  }

设置显示滚动条

  1. 父盒子设置 overflow: auto,表示若内容超过父盒子大小,则显示滚动条;
  2. overflow-x:auto 对应横向滚动条,overflow-y:auto 对应纵向滚动条。

标签:自定义,deep,height,滚动条,width,scrollbar,设置,webkit
From: https://www.cnblogs.com/shayloyuki/p/16624261.html

相关文章

  • el-table 高亮行:只有设置表格数据才生效
    需求:表格若有数据,则默认高亮第一行。之前高亮的行,若在查询结果列表中,则保持高亮不变;反之,则高亮第一行。解决办法需求1很容易实现:created(){//默认高亮第......
  • net-snmp 自定义OID利用脚本获取值
    两种办法:1)pass方式/etc/snmp/snmpd.conf   写脚本   脚本需要注意:要连续输出三行:1、OID2、类型3、值如果不按照这个规定,直接输出值,将会报错。检......
  • 微信小程序---自定义组件和传参
    1.自定义组件1.在项目根目录中新建components文件夹2.在components文件夹下新建组件的文件夹,如zujian3.鼠标右键点击zujian文件夹,选择新建component,就会生成wxml,wxss,js......
  • 设置视图的对齐方式
    通过layout_gravity属性可以设置当前视图在上级视图中的对齐方式通过gravity属性可以设置下级视图在上级视图中的对齐方式这两个属性的取值可以是:top,bottom,left,right,也可......
  • 微信上怎么设置每周二汽车限行限号提醒
    对于很多人来说,每天手机不离手主要是为了接收各种各样的微信消息,无论是我们和孩子老师的交流还是和家人、同事们之间的交流都要用到微信。既然大多数人的都比较重视微信消......
  • 学习:python 异常处理 else 和 finall 语句 自定义异常
       自定义一个异常 ......
  • Thread+isInterrupted+自定义(停止线程)
    1.interrupt终端线程publicstaticvoidmain(String[]args)throwsInterruptedException{//创建子线程Threadthread1=newThread(()->{......
  • centos7 设置开机启动任务
    环境:centos7需求:前两天调通的DNSserver(bind/named)设置开机自启动操作:修改/etc/rc.local注意这个rc.local文件默认是没有可执行属性的,所以需要手动为其添加......
  • Ribbon:自定义负载均衡算法
    在springcloud同级,与启动类所在包不同级创建myrule包,写MyWTYRule配置  SpringCloud还允许您通过使用@RibbonClient声明其他配置(位于RibbonClientConfiguration之上......
  • zabbix自定义监控项
    zabbix自定义监控项zabbix报错排查#1.检查端口[root@zabbix~]#telnet172.16.1.510050#2.服务端是否能获取到客户端的监控数据[root@zabbix~]#yuminstall-......