-
-
xxxl 数据领袖Lv6
发表于2020-11-18 15:18
楼主
本帖最后由 xxxl 于 2021-1-15 14:05 编辑
一、滚动条样式介绍
滚动条是由以下几个这些元素组成
复制代码一般-webkit-scrollbar以及-webkit-scrollbar-thumb会在报表中用的更多一些。
关于修改的样式可以百度参考一下css样式，比如宽width、高height、背景颜色background-color、圆角border-radius等。
脚本是写在这里
二、应用举例
现在以修改滚动条中的可以滑动的小滑块背景颜色举例
1.修改页面所有元素滚动条样式
复制代码2.修改指定元素的滚动条样式
比如仅修改报表页面滚动条样式，在-webkit-scrollbar-thumb前加#BODYAREA
复制代码
修改容器的滚动条样式，在-webkit-scrollbar-thumb前加容器代号#HHH2
复制代码
修改tab页某一标签页的滚动条样式，在-webkit-scrollbar-thumb前加tab页的某一子标签页代号#HHH8
复制代码
让容器滚动条，不需要鼠标放上即可显示出来复制代码
三、其他的设置入口
这里不仅可以在客户端脚本中写，也可以写在报表自定义样式中
代码就变成了
复制代码点击下方的语法帮助可以了解更多。
一、滚动条样式介绍
滚动条是由以下几个这些元素组成
- ::-webkit-scrollbar 滚动条整体部分
- ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
- ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
- ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
- ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
- ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
- ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
关于修改的样式可以百度参考一下css样式，比如宽width、高height、背景颜色background-color、圆角border-radius等。
脚本是写在这里
二、应用举例
现在以修改滚动条中的可以滑动的小滑块背景颜色举例
1.修改页面所有元素滚动条样式
- EUI.addStyleSheet("::-webkit-scrollbar-thumb{background-color:red;}");
比如仅修改报表页面滚动条样式，在-webkit-scrollbar-thumb前加#BODYAREA
- EUI.addStyleSheet("#BODYAREA::-webkit-scrollbar-thumb{background:red;}");
修改容器的滚动条样式，在-webkit-scrollbar-thumb前加容器代号#HHH2
- EUI.addStyleSheet("#HHH2::-webkit-scrollbar-thumb{background:red;}");
修改tab页某一标签页的滚动条样式，在-webkit-scrollbar-thumb前加tab页的某一子标签页代号#HHH8
- EUI.addStyleSheet("#HHH8::-webkit-scrollbar-thumb{background:red;}");
让容器滚动条，不需要鼠标放上即可显示出来
- EUI.addStyleSheet("::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-thumb{visibility:visible!important;}");
三、其他的设置入口
这里不仅可以在客户端脚本中写，也可以写在报表自定义样式中
代码就变成了
- #HHH2::-webkit-scrollbar-thumb {
- background: red;
- }
