Java教程

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

本文主要是介绍自定义滚动条样式不生效:横轴设置 height,纵轴设置 width,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

问题

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

解决办法

捣鼓很久才发现,原来横轴要设置 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 对应纵向滚动条。
这篇关于自定义滚动条样式不生效:横轴设置 height,纵轴设置 width的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!