本帖最后由 Timothy.Xu 于 2021-8-2 11:56 编辑
您好,看到您这个问题和这个帖子类似:
选项卡滚动条能否也弄成细条形状?
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=96434&fromuid=59908
(出处: 葡萄城产品技术社区)
其实对于选项卡和页面容器,都可以通过更改 CSS 的方式去实现修改滚动条样式。比如参考这个文章:
纯css修改浏览器scrollbar滚动条样式 - SegmentFault 思否
给页面容器添加 CSS 类名“test-1”,然后把这段 CSS 放到文件里就可以:- .test-1::-webkit-scrollbar {
- /*滚动条整体样式*/
- width: .5rem;
- height: .5rem;
- background: hsla(0, 0%, 100%, 0.6);
- }
- .test-1::-webkit-scrollbar-thumb {
- /*滚动条里面小方块*/
- border-radius: 0;
- background-color: rgba(95,95,95,.4);
- transition: all .2s;
- border-radius: .5rem;
- }
- .test-1::-webkit-scrollbar-track {
- /*滚动条里面轨道*/
- border-radius: 0;
- }
- .test-1::-webkit-scrollbar-thumb:hover {
- background-color: rgba(95,95,95, .7);
- }
复制代码 实现效果如下:
|