Taro中如何正确监听页面滚动事件？

子晨~ 提问于 2026-03-12 13:15:19 阅读 35

移动

我在Taro开发微信小程序时，想监听页面的滚动事件，用了Taro.createSelectorQuery()和onPageScroll都不太对，页面根本没触发。

查了文档说要在页面配置里加"enablePageScroll": true，但加了也没用。我的页面结构是普通的ScrollView包裹内容，是不是不能同时用ScrollView和onPageScroll？

export default {
  onPageScroll(e) {
    console.log('scroll', e.scrollTop)
  }
}

Taro 跨端开发

我来解答赞 11 收藏

反馈

2 条解答

Code°欧辰 Lv1

兄弟，你这个问题很典型了。

问题核心在于：你用了ScrollView，就别指望onPageScroll能触发。这两个是互斥的。

ScrollView是自定义滚动组件，它有自己的滚动事件，根本不走页面原生滚动。onPageScroll只能监听页面的原生滚动，你用了ScrollView就等于把页面原生滚动这条路堵死了。

解决方案很简单，要么用ScrollView的方式，要么用页面原生滚动的方式：

用ScrollView的话就这样：

import { ScrollView, View } from '@tarojs/components'



export default function Index() {

  return (

    
      scrollY

      onScroll={(e) => {

        console.log('scrollTop:', e.detail.scrollTop)

      }}

    >

      你的内容

    

  )

}

如果你想用onPageScroll，那就不能要ScrollView，让页面自然滚动，但这样就没法做下拉刷新之类的功能了。

关于enablePageScroll这个配置，它是让小程序页面支持下拉刷新、页面内scroll-view联动这些能力的，跟监听滚动事件没关系，别指望它。

简单总结：ScrollView配onScroll，页面原生滚动配onPageScroll，各走各的路，不能混用。

2026-03-14 08:08

皇甫艳艳 Lv1

你的问题很常见，就是把页面滚动和ScrollView滚动搞混了。

如果你的页面用的是ScrollView组件，那onPageScroll根本不会触发，因为ScrollView内部滚动是组件级别的事件，不会冒泡到页面级别。你应该用ScrollView的onScroll属性来监听。

// 正确做法：用ScrollView的onScroll

import { ScrollView } from '@tarojs/components'



export default function Index() {

  const handleScroll = (e) => {

    console.log('scrollTop:', e.detail.scrollTop)

  }



  return (

    
      scrollY

      onScroll={handleScroll}

    >

      {/ 内容 /}

    

  )

}

如果你想用onPageScroll让整个页面滚动，那就不能用ScrollView包裹，要让页面本身滚动。需要在页面配置里开启：

// config/index.js 或 page.config.js

export default {

  navigationBarTitleText: '首页',

  enablePageScroll: true  // 开启页面滚动

}

然后页面不要用ScrollView，直接放内容就行：

// 页面组件里

export default class Index extends Component {

  onPageScroll(e) {

    console.log('scrollTop:', e.scrollTop)

  }



  render() {

    return (

      

        {/ 这里直接放内容，会随页面滚动 /}

      

    )

  }

}

总结一下：ScrollView滚动用onScroll，页面滚动用onPageScroll，两者只能选一个，不能同时用。你之前的情况就是页面被ScrollView撑开了，页面本身没有滚动，所以onPageScroll不会触发。

2026-03-12 14:12