taro3.0.8 onPageScroll 失效、onReachBottom在部分场景下失效

[7gongzi]

相关平台

H5

复现仓库

https://github.com/7gongzi/taro3.0
浏览器版本: Chrome 62
使用框架: React

复现步骤

React类组件下onPageScroll 不生效

onPageScroll() {
        // 不生效
        console.log('onPageScroll');
    }

使用未知taro-ui组件导致页面代码css自动设置

#app,body,html{height:100%}.taro-tabbar__border-white:before{border-top-color:#fff!important}.taro-tabbar__container{display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.taro-tabbar__panel{-ms-flex:1;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}.taro-tabbar__tabbar{position:relative;height:50px;width:100%;-webkit-transition:bottom .2s,top .2s;transition:bottom .2s,top .2s}.taro-tabbar__tabbar-top{top:0}.taro-tabbar__tabbar-bottom{bottom:0}.taro-tabbar__tabbar-hide{display:none}.taro-tabbar__tabbar-slideout{top:-52px;-ms-flex:0 0;flex:0 0}.taro-tabbar__panel .taro-tabbar__tabbar-slideout{top:auto;bottom:-52px}

代码里面的

#app,body,html{height:100%}

导致onReachBottom 失效

期望结果

onReachBottom正常执行
onPageScroll正常执行

实际结果

onPageScroll失效
onReachBottom 部分用了taro-ui组件场景失效

环境信息

👽 Taro v3.0.8


  Taro CLI 3.0.8 environment info:
    System:
      OS: macOS 10.14.5
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
      Yarn: 1.19.2 - /usr/local/bin/yarn
      npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
    npmPackages:
      @tarojs/components: 3.0.8 => 3.0.8 
      @tarojs/mini-runner: 3.0.8 => 3.0.8 
      @tarojs/react: 3.0.8 => 3.0.8 
      @tarojs/runtime: 3.0.8 => 3.0.8 
      @tarojs/taro: 3.0.8 => 3.0.8 
      @tarojs/webpack-runner: 3.0.8 => 3.0.8 
      babel-preset-taro: 3.0.8 => 3.0.8 
      eslint-config-taro: 3.0.8 => 3.0.8 
      eslint-plugin-taro: 3.0.8 => 3.0.8 
      nerv-devtools: ^1.5.7 => 1.5.7 
      nervjs: ^1.5.7 => 1.5.7 
      react: ^16.10.0 => 16.13.1 
      taro-ui: ^2.2.2 => 2.3.4 

[Chen-jj]

@7gongzi onReachBottom 是正确的，这些 CSS 属性共同作用下，window 并没有滚动，滚动的是 taro-tabar__panel。那当然不会触发 onReachBottom 了，因为 window 就只有 100% 这么高。

.taro-tabbar__container {
  height: 100%;
  overflow: hidden;
}
.taro-tabbar__panel {
  overflow: auto;
}

[yuezk]

@Chen-jj 是不是要更新一下 H5 里面的 query.selectViewport() 的方法，现在由于 .taro_tabbar__panel 变成了可以滚动的容器，html 标签变成了不滚动的了，调用 query.selectViewport().scrollOffset() 拿到的 scrollTop 的值始终是 0，目前只能写成下面这样：

if (process.env.TARO_ENV === 'h5') {
    query.select('.taro-tabbar__panel').scrollOffset();
} else {
    query.selectViewport().scrollOffset();
}

[Chen-jj]

@yuezk 重新提个 issue 咯