小程序 onPageScroll 不能触发

3,245 阅读1分钟

前言

今天在小程序上用onPageScroll写的滚动监听,突然被反馈失效了,顿时感觉心头一紧,好好的功能怎么说不管用就不管用了呢?

原因

<page>
  <view class="body">
      <view class="view">{{desc}}</view>
  </view>
</page>

page元素和class.bodyview元素切记不可同时设置heigit: 100%;,否则,不论class.view的元素高度超过窗口高度有多明显,onPageScroll都不会触发。

page {
  overflow: hidden;
}
.body {
  height: 100%; // 或 100vh;
}

原来,小伙伴为了防止滚动穿透,在page上加了个overflow: hidden;,在.body上加了个height: 100%;,导致onPageScroll不会触发。

解决

page元素和class.bodyview元素,至少有一个设置height:auto;,否则就会导致onPageScroll不会触发。问题是解决了,but,有小伙伴知道原理是什么吗?

参考文档:

注册页面