滚动框

示例

滚动行为

滚动框的滚动行为与系统默认的滚动行为完全一致。

除了拖拽滚动条、点击轨道外，还可以通过在滚动内容区域使用鼠标滚轮、PageUp、PageDown、Home、End、上下箭头、空格键，点击锚点，拖拽内容，调用脚本等方式来使滚动框的内容滚动。

滚动区域的尺寸

默认情况下，滚动区域的尺寸等于滚动框的尺寸减去轨道的尺寸。

可以通过配置 data-content-shrink 来指定“滚动区域”右侧与“滚动框”右侧的间距。

本例新建了两个滚动框，并将第二个滚动框的 data-content-shrink 设置为 20：

滚动条的最小高度

当可滚动的内容很长时，滚动条可能会变得很短。在这种情况下，可能需要限制滚动条的最小高度。

可以通过配置 data-scrollbar-min-height 来指定滚动条的最小高度。

如果没有指定 data-scrollbar-min-height，则使用 20 作为默认值。

本例新建了两个内容足够长的滚动框，并将第二个滚动框的 data-scrollbar-min-height 设置为 50：

更新滚动条

当滚动框的尺寸、可见性或其内容区域的滚动高度发生变化时，需要调用 update 方法来校正滚动条的位置。

如果内容区域不需要滚动即可完全显示，则滚动条将被隐藏。

本例新建了一个可以隐藏、显示、伸缩尺寸的滚动框：