renderjs 里怎么获取页面滚动位置？

议谣的笔记提问于 2026-02-28 21:39:20 阅读 8

移动

我在 uni-app 里用 renderjs 想监听页面滚动，但 window.pageYOffset 始终是 0，试了 document.documentElement.scrollTop 也不行，是不是在 renderjs 里不能直接访问这些属性？

我的代码大概是这样：

export default {
  mounted() {
    console.log('scrollY:', window.pageYOffset);
    window.addEventListener('scroll', () => {
      console.log('滚动了');
    });
  }
}

控制台没报错，但就是拿不到滚动值，也监听不到 scroll 事件，这咋整？

renderjs uni-app

我来解答赞 1 收藏

反馈

1 条解答

码农瑞雪 Lv1

uni-app 的页面结构跟普通网页不太一样，滚动容器不是 window，所以直接监听 window 肯定没反应。

页面滚动实际发生在 .uni-page-body 这个元素上，得找到它再监听。

直接改：

export default {

  data() {

    return {

      scrollEl: null

    }

  },

  mounted() {

    // uni-app 的页面滚动容器是这个

    this.scrollEl = document.querySelector('.uni-page-body') || document.documentElement;

    

    this.scrollEl.addEventListener('scroll', () => {

      console.log('scrollTop:', this.scrollEl.scrollTop);

    });

  },

  beforeDestroy() {

    if (this.scrollEl) {

      this.scrollEl.removeEventListener('scroll', this.handleScroll);

    }

  }

}

更好的写法是用事件捕获，一劳永逸：

export default {

  mounted() {

    // 捕获阶段监听，不管哪个元素滚动都能拿到

    document.addEventListener('scroll', this.handleScroll, true);

  },

  methods: {

    handleScroll(e) {

      const target = e.target;

      // 过滤一下，只关心页面级滚动

      if (target.classList && target.classList.contains('uni-page-body')) {

        console.log('scrollTop:', target.scrollTop);

      }

    }

  },

  beforeDestroy() {

    document.removeEventListener('scroll', this.handleScroll, true);

  }

}

核心坑点就是 uni-app 的页面容器结构，window 根本不参与滚动。另外记得销毁时移除监听，不然内存泄漏等着你。

2026-02-28 22:02