title: ScrollViewContext

sidebar_label: ScrollViewContext

增强 ScrollView 实例，可通过 Taro.createSelectorQuery 的 NodesRef.node 方法获取。 仅在 scroll-view 组件开启 enhanced 属性后生效。

支持情况：ScrollViewContext - 图1 ScrollViewContext - 图2 ScrollViewContext - 图3

参考文档

方法

参数 类型 说明
scrollEnabled boolean 滚动开关
bounces boolean 设置滚动边界弹性 (仅在 iOS 下生效)
showScrollbar boolean 设置是否显示滚动条
pagingEnabled boolean 分页滑动开关
fastDeceleration boolean 设置滚动减速速率
decelerationDisabled boolean 取消滚动惯性 (仅在 iOS 下生效)

scrollTo

滚动至指定位置

支持情况：ScrollViewContext - 图4 ScrollViewContext - 图5 ScrollViewContext - 图6

参考文档

  1. (object: Option) => void
参数 类型
object Option

scrollIntoView

滚动至指定位置

支持情况：ScrollViewContext - 图7 ScrollViewContext - 图8 ScrollViewContext - 图9

参考文档

  1. (selector: string) => void
参数 类型 说明
selector string 元素选择器

参数

scrollTo

Option

参数 类型 必填 说明
top number 否 顶部距离
left number 否 左边界距离
velocity number 否 初始速度
duration number 否 滚动动画时长
animated boolean 否 是否启用滚动动画

示例代码

  1. Taro.createSelectorQuery()
  2.   .select('#scrollview')
  3.   .node()
  4.   .exec((res) => {
  5.     const scrollView = res[0].node;
  6.     scrollView.scrollEnabled = false;
  7.   })

API 支持度

API 微信小程序 H5 React Native
ScrollViewContext ✔️
ScrollViewContext.scrollTo ✔️
ScrollViewContext.scrollIntoView ✔️