请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

红烧兔头
金牌服务用户   /  发表于:2021-8-2 11:51  /   查看:1869  /  回复:3
10金币
页面容器 滚动条能否也 弄成跟 表格一样 支持 细条形状,更美观

最佳答案

查看完整内容

您好,看到您这个问题和这个帖子类似: 选项卡滚动条能否也弄成细条形状? https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=96434&fromuid=59908 (出处: 葡萄城产品技术社区) 其实对于选项卡和页面容器,都可以通过更改 CSS 的方式去实现修改滚动条样式。比如参考这个文章: 纯css修改浏览器scrollbar滚动条样式 - SegmentFault 思否 给页面容器添加 CSS 类名“test-1[/backcolor]”,然后把这段 CSS ...

3 个回复

倒序浏览
最佳答案
最佳答案
Timothy.Xu讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2021-8-2 11:51:25
来自 2#
本帖最后由 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 放到文件里就可以:
  1. .test-1::-webkit-scrollbar {
  2.   /*滚动条整体样式*/
  3.   width: .5rem;
  4.   height: .5rem;
  5.   background: hsla(0, 0%, 100%, 0.6);
  6.   }

  7.   .test-1::-webkit-scrollbar-thumb {
  8.   /*滚动条里面小方块*/
  9.   border-radius: 0;
  10.   background-color: rgba(95,95,95,.4);
  11.   transition: all .2s;
  12.   border-radius: .5rem;
  13.   }

  14.   .test-1::-webkit-scrollbar-track {
  15.   /*滚动条里面轨道*/
  16.   border-radius: 0;
  17.   }

  18.   .test-1::-webkit-scrollbar-thumb:hover  {
  19.     background-color: rgba(95,95,95, .7);
  20.   }
复制代码
实现效果如下:



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
aatest
高级会员   /  发表于:2021-8-2 14:40:24
3#
Timothy.Xu 发表于 2021-8-2 11:51
您好,看到您这个问题和这个帖子类似:

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

6666
回复 使用道具 举报
Joe.xu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2021-8-2 15:35:43
4#

感谢您对活字格的支持。
后面有问题,欢迎继续发新帖交流
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部