修改滚动条样式:css样式问题

如何修改滚动条的宽度和颜色???

FineReport cipay 发布于 2023-3-3 11:01
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共2回答
最佳回答
0
L大大Lv7高级互助
发布于2023-3-3 13:34

自定义滚动条 

div::-webkit-scrollbar {width:10px; height:10px; background-color:transparent;} /*自定义滚动条宽、高、背景色*/

div::-webkit-scrollbar-track {background-color:#FF0000; border-radius:10px; } /*自定义滚动条轨道颜色、圆角*/

div::-webkit-scrollbar-thumb {background-color:#00FF00; border-radius:10px; } /*定义滑块颜色、圆角*/

新建ScrollBar.css添加到工程的help/css文件夹里面

如果是cpt,点击【模板】-【模板web属性】-【分页预览设置】,添加加载起始事件,输入下述代码:

$('<link rel="stylesheet" type="text/css" href="/webroot/help/css/ScrollBar.css"/>').appendTo('head')

如果是frm,打开一个决策报表,在report的事件里面添加初始化后事件,输入下述代码:

$('<link rel="stylesheet" type="text/css" href="/webroot/help/css/ScrollBar.css"/>').appendTo('head')

移动端暂不支持,不支持cptx 和 新自适应,该css只支持谷歌和edge

最佳回答
0
1592Lv6高级互助
发布于2023-3-3 11:02(编辑于 2023-3-3 12:17)

参考:自定义滚动条插件-https://help.fanruan.com/finereport/doc-view-2412.html

image.png

-----------------------------------------------------------

Y轴class元素:slimScrollBarY

Xclass元素: slimScrollRailX

setTimeout(function(){

       $('.slimScrollBarY').css('background','red');

       },500)

  • cipay cipay(提问者) 就一个css至于买插件吗?
    2023-03-03 11:50 
  • 1592 1592 回复 cipay(提问者) 看修改答案,这个好像是10的,忘了
    2023-03-03 12:17 
  • 3关注人数
  • 1306浏览人数
  • 最后回答于:2023-3-3 13:34
    请选择关闭问题的原因
    确定 取消
    返回顶部