scroll2+

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

子组件

支持，也支持嵌套 scroll。

属性

支持通用属性

属性	类型	默认值	必填	说明
scroll-x	Boolean	false	否	是否允许横向滚动
scroll-y	Boolean	true	否	是否允许纵向滚动
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-snap-type	-		作用在 scroll 组件上，表示 scroll 的滚动吸附类型。 第一个参数为 x 或 y ，表示水平方向上滚动或竖直方向上滚动； 第二个参数为 mandatory 或proximity。mandatory 表示选择距离最近的锚点吸附，proximity 距离吸附锚点不到容器高度的 30% 时才会吸附。默认为 proximity；
scroll-snap-align	none | start | center | end	none	作用在 scroll 子组件上，表示子组件和 scroll 的对齐形式； start：表示组件和 scroll 顶部对齐。 center: 表示组件和 scroll 底部对齐。 end：表示组件和 scroll 中心对齐。 none：无需对齐，默认值。

示例

<scroll style="scroll-snap-type: y mandatory;">
  <div style="scroll-snap-align: start;"></div>
  <div style="scroll-snap-align: center;"></div>
  <div style="scroll-snap-align: end;"></div>
  <div style="scroll-snap-align: none;"></div>
</scroll>

事件

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

方法

名称	参数	返回值	描述
getScrollRect	无	Object	获取滚动内容的尺寸
scrollTo	Object	无	让滚动组件窗口滚动到某个坐标位置
scrollBy	Object	无	使滚动组件窗口滚动一定距离

scrollTo方法Object参数

名称	类型	默认值	必填	描述
top	Number	--	否	滚动组件的纵轴坐标值，不传表示纵轴不滚动，负数按0处理，超出滚动范围按滚动边界处理。
left	Number	--	否	滚动组件的横轴坐标值，不传表示横轴不滚动，负数按0处理，超出滚动范围按滚动边界处理。
behavior	String	auto	否	滚动行为，smooth-平滑滚动，instant-瞬间滚动，auto-等同于instant。

scrollBy方法Object参数

名称	类型	默认值	必填	描述
top	Number	--	否	滚动组件的纵轴偏移量，可以是负数，超出滚动范围按滚动边界处理。
left	Number	--	否	滚动组件的横轴偏移量，可以是负数，超出滚动范围按滚动边界处理。
behavior	String	auto	否	滚动行为，smooth-平滑滚动，instant-瞬间滚动，auto-等同于instant。

getScrollRect方法异步返回值

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

例子

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

this.$element('scroll').scrollTo({
    top: 1000,
    left: 0,
    behavior: 'smooth'
})

this.$element('scroll').scrollBy({
    top: 1000,
    left: 0,
    behavior: 'smooth'
})