如何自己设置滚动条宽度?

预览模式横向滚动条太窄了,如何自己设置宽度

FineReport 帆软用户xbQPCUvBEq 发布于 2023-3-13 09:49
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共4回答
最佳回答
0
1592Lv6高级互助
发布于2023-3-13 11:15

参考:11,有自定义滚动条

image.png

image.png

setTimeout(function(){

$('.sheet-scrollbar-slider').css('height','20px');

$('.sheet-scrollbar-slider').css('border-radius','10px');

$('.sheet-scrollbar.sheet-scrollbar-x').css('height','22px');

},1000)

最佳回答
0
snrtuemcLv8专家互助
发布于2023-3-13 09:50(编辑于 2023-3-13 10:06)

自定义滚动条方案

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

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

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

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

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

$('').appendTo('head')

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

$('').appendTo('head')

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

=========

直接初始化事件

var style=document.createElement('style');

style.innerHTML=".test::before{color:green}";

document.head.appendChild(style);

document.styleSheets[0].insertRule('::-webkit-scrollbar {width:10px; height:10px; background-color:transparent;}',0)

document.styleSheets[0].insertRule('::-webkit-scrollbar-track {background-color:#FF0000; border-radius:10px; }',0)

document.styleSheets[0].insertRule('::-webkit-scrollbar-thumb {background-color:#00FF00; border-radius:10px; }',0)

最佳回答
0
Z4u3z1Lv6专家互助
发布于2023-3-13 09:50
最佳回答
0
苏菲的供词Lv6中级互助
发布于2023-3-13 09:51
  • 3关注人数
  • 560浏览人数
  • 最后回答于:2023-3-13 11:15
    请选择关闭问题的原因
    确定 取消
    返回顶部