页面容器滚动条能否也弄成细条形状？

Timothy.Xu

页面容器滚动条能否也弄成跟表格一样支持细条形状，更美观

Timothy.Xu · Timothy.Xu

本帖最后由 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);
}

复制代码

实现效果如下：

aatest · aatest

Timothy.Xu 发表于 2021-8-2 11:51
您好，看到您这个问题和这个帖子类似：

选项卡滚动条能否也弄成细条形状？

6666

Joe.xu · Joe.xu

aatest 发表于 2021-8-2 14:40
6666

感谢您对活字格的支持。
后面有问题，欢迎继续发新帖交流

		自动登录	找回密码
密码			立即注册

[已处理] 页面容器滚动条能否也弄成细条形状？

最佳答案

3 个回复

本帖子中包含更多资源

讲师达人

悬赏达人

微信认证勋章

元老葡萄

活字格认证

活字格高级认证

圣诞拼拼乐