最新历史版本 :JS实现隐藏滚动条 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器版本功能变动
11.0-

1.2 应用场景

当普通报表、决策报表的报表块或者 FVS 模板的表格组件中内容过多时,会出现横向和纵向滚动条,在看板、大屏应用中下非常影响报表美观。如下图所示:

为了报表美观,如何隐藏出现的滚动条呢?

1.3 功能介绍

FineReport 11.0 目前支持两种方法隐藏:

注1:以上两种方法均不支持移动端。

注2:由于浏览器限制,本文方案不支持隐藏滚动条的同时保留滚动机制。

2. 实现方法编辑

2.1 接口介绍

使用接口时,事件可用作按钮控件的「点击事件」、或者模板的「加载结束」事件,或者组件的「初始化后」事件等等,根据实际场景确定即可。详情请参见:JS实现FVS隐藏表格组件滚动条隐藏滚动条接口 。

效果如下图所示:

5.gif

2.2 安装插件

安装滚动条插件后,实际是替换了滚动条样式,被统一为灰色的长圆角矩形,并且会跟随鼠标滚轮滚动,但它会在空闲时自动隐藏,使界面变得简洁。

详情请参见:自定义滚动条插件。效果图如下:

注:不支持在 FVS 模板 和 旧版决策报表 中使用。

1622613706232601.gif