1. 概述
1.1 版本
| 报表服务器版本 | 功能变动 |
|---|---|
| 10.0.19 | 新增隐藏报表块滚动条 JS 接口，单行代码即可隐藏报表块滚动条 |
1.2 应用场景
报表块内容过多时，会出现横向和纵向滚动条，在看板、大屏应用中下非常影响报表美观。如下图所示：
为了报表美观，如何隐藏出现的滚动条呢？
1.3 功能介绍
FineReport 目前支持三种方法隐藏：
方法一：使用官方接口，但是接口只适用于 10.0.19 及之后的版本。
方法二：使用 JavaScript 代码隐藏。
方法三：安装 自定义滚动条插件 。
注：以上三种方法均不支持移动端。
2. 实现方法
2.1 接口介绍
使用接口时，事件可用作按钮控件的「点击事件」、或者模板的「加载结束」事件，或者组件的「初始化后」事件等等，根据实际场景确定即可。
注：以下接口适用于 10.0.19 及之后的版本。
2.1.1 隐藏横向滚动条
| 方法 | setHScrollBarVisible(visibility) | 设置横向滚动条显示/隐藏，隐藏后不会跟随鼠标滚轮滚动 |
|---|---|---|
| 参数 | visibility: boolean | 滚动条是否显示，布尔型，默认为 true true：显示 false：隐藏 |
| 返回值 | void | |
| 示例 | 示例1：若获取到的报表块对象定义为 report ，隐藏横向的滚动条 示例2：普通报表中隐藏横向的滚动条 示例3：决策报表中隐藏 report0 报表块的横向滚动条 注：代码添加在「初始化后」事件中时，建议添加一个延迟函数，否则可能会因为报表块对象没有完全创建而发生错误。示例如下： | |
| 应用示例 | 决策报表中隐藏 report0 报表块的横向滚动条： 点击可下载模板：隐藏横向滚动条.frm | |
| 移动端 | 不支持移动端 | |
2.1.2 隐藏纵向滚动条
| 方法 | setVScrollBarVisible(visibility) | 设置纵向滚动条显示/隐藏，隐藏后不会跟随鼠标滚轮滚动 |
|---|---|---|
| 参数 | visibility: boolean | 滚动条是否显示，布尔型，默认为 true true：显示 false：隐藏 |
| 返回值 | void | |
| 示例 | 示例1：若获取到的报表块对象定义为 report ，隐藏纵向的滚动条 示例2：普通报表中隐藏纵向的滚动条 示例3：决策报表中隐藏 report0 报表块的纵向滚动条 注：代码添加在「初始化后」事件中时，建议添加一个延迟函数，否则可能会因为报表块对象没有完全创建而发生错误。示例如下： | |
| 应用示例 | 决策报表中隐藏 report0 报表块的纵向滚动条： 点击可下载模板：隐藏纵向滚动条.frm | |
| 移动端 | 不支持移动端 | |
2.2 使用 JS 代码
使用 JS 获取报表块的整体宽度，通过修改报表的宽度，将滚动条隐藏。隐藏后可以通过鼠标滚轮上下滚动内容。
详情请参见：JS隐藏报表块滚动条 。效果如下图所示：
2.3 安装插件
安装滚动条插件后，实际是替换了滚动条样式，被统一为灰色的长圆角矩形，并且会跟随鼠标滚轮滚动，但它会在空闲时自动隐藏，使界面变得简洁。
详情请参见：自定义滚动条插件。效果图如下：