scroll

scroll

滚动视图容器。竖向或水平方向滚动容器，竖向滚动需要设置定高，水平滚动需要设置定宽。

子组件

支持，也支持嵌套 scroll。

属性

支持通用属性

属性	类型	默认值	必填	说明
scroll-x	Boolean	false	否	是否允许横向滚动
scroll-y	Boolean	false	否	是否允许纵向滚动
scroll-top	Number/String		否	设置竖向滚动条位置，内容顶部到 scroll 顶部的距离，如果有滚动吸附效果则先执行scroll-top再吸附。
scroll-bottom	Number/String		否	设置竖向滚动条位置，内容底部到 scroll 底部的距离，如果有滚动吸附效果则先执行scroll-bottom再吸附。同时设置scroll-top和scroll-bottom 以scroll-top为准
scroll-left	Number/String		否	设置横向滚动条位置，内容左侧到 scroll 左侧的距离，如果有滚动吸附效果则先执行scroll-left再吸附。
scroll-right	Number/String		否	设置横向滚动条位置，内容右侧到 scroll 右侧的距离，如果有滚动吸附效果则先执行scroll-right再吸附。同时设置scroll-left和scroll-right 以scroll-left为准
bounces	Boolean	false	否	是否边界回弹

样式

支持通用样式

scroll 组件暂不支持 margin, padding 相关样式

名称	类型	默认值	描述
scroll-snap-type	-		作用在 scroll 组件上，表示 scroll 的滚动吸附类型。
第一个参数为 x 或 y ，表示水平方向上滚动或竖直方向上滚动；
第二个参数为 mandatory 或proximity。mandatory 表示选择距离最近的锚点吸附，proximity 距离吸附锚点不到容器高度的 30% 时才会吸附。默认为 proximity；
scroll-snap-align	none	start	center
start：表示组件和 scroll 顶部对齐。
center: 表示组件和 scroll 底部对齐。
end：表示组件和 scroll 中心对齐。
none：无需对齐，默认值。
scroll-snap-stop	-	normal	作用在 scroll 组件上，是否允许滚动容器“越过”可能的捕捉位置；normal可以越过捕捉位置，always 不能越过捕捉位置

事件

名称	参数	描述
scrolltop		滚动到顶部触发
scrollbottom		滚动到底部触发
scroll	{ scrollX，scrollY }	滚动触发
scrollX 表示滚动的水平距离；
scrollY 表示滚动的垂直距离；

方法

名称	描述
getScrollRect	获取滚动内容的尺寸
revealScrollbar	短暂显示滚动条。仅当内容超出滚动容器（scroll 容器）时生效。

getScrollRect

获取滚动内容的尺寸

function getScrollRect(options: {
  success?: (res: { width: number; height: number }) => void
  fail?: (data: string, code: number) => void
}): void

返回值说明：

属性	类型	描述
width	Number	滚动内容的宽度，包含border和padding
height	Number	滚动内容的高度，包含border和padding

示例：

this.$element('scroll').getScrollRect({
  success({ width, height }) {
    console.log('宽度', width)
    console.log('高度', height)
  },
  fail(data, code) {},
})

revealScrollbar

短暂显示滚动条。仅当内容超出滚动容器（scroll 容器）时生效。

function revealScrollbar(options: {
  success?: () => void
  fail?: (data: string, code: number) => void
}): void

示例：

this.$element('scroll').revealScrollbar({
  success() {},
  fail(data, code) {},
})