pageScrollTo 滚动后的实际位置与给定的目标位置不符

[GoodbyeNJN]

问题描述

使用Taro.pageScrollTo方法垂直滚动到页面的某个位置，滚动结束后获取的位置信息与调用方法时给定的目标位置有偏差，且该偏差量与页面滚动的距离成正相关。

复现步骤

1. 运行一个全新的空项目，打开到该页面
2. 将页面向下滚动一段距离 x
3. 点击 title-1，页面自动向上滚动目标位置
4. 在 x 较小时，页面会大致滚动到目标位置，但当 x 增大时，实际位置与目标位置出现偏差，且偏差量与 x 成正相关

/* index.jsx */
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import './index.less';

export default props => {
  const handleClick = index => {
    // 获取当前的位置信息
    Taro.createSelectorQuery()
      .selectViewport()
      .scrollOffset()
      .select(`#anchor-titles`)
      .boundingClientRect()
      .select(`#anchor-item-${index}`)
      .boundingClientRect()
      .exec(([viewPort, titles, item]) => {
        // 计算页面滚动的目标垂直位置
        const y = viewPort.scrollTop + item.top - titles.height;
        console.log('==================================');
        console.log('目标垂直位置:', y);
        console.log('----------------------------------');
        console.log('滚动前的垂直位置:', viewPort.scrollTop);
        console.log('期望的垂直滚动距离:', y - viewPort.scrollTop);
        console.log('----------------------------------');

        // 开始滚动
        Taro.pageScrollTo({
          scrollTop: y,
          complete() {
            // 滚动结束后再次获取位置信息
            Taro.createSelectorQuery()
              .selectViewport()
              .scrollOffset()
              .exec(([view]) => {
                console.log('滚动后的垂直位置:', view.scrollTop);
                console.log('实际的垂直滚动距离:', view.scrollTop - viewPort.scrollTop);
                console.log('==================================');
              });
          },
        });
      });
  };

  return (
    <View className='main'>
      <View className='margin'></View>

      {/* 吸顶标题 */}
      <View className='sticky-top-container'>
        <View className='titles' id='anchor-titles'>
          {[1, 2, 3].map((value, index) => (
            <View
              className={'title'}
              onClick={() => {
                handleClick(index);
              }}
            >
              {`title-${value}`}
            </View>
          ))}
        </View>
      </View>

      {/* 色块 */}
      <View className='items-container'>
        {[1, 2, 3, 4].map((value, index) => (
          <View className='item' id={`anchor-item-${index}`}></View>
        ))}
      </View>
    </View>
  );
};

/* index.less */
.main {
  background-color: yellow;
}

.margin {
  height: 100px;
}

.sticky-top-container {
  position: sticky;
  top: 0;
  z-index: 10;
  border: 1px solid #000;

  .titles {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80px;
    font-size: 30px;
  }
}

.items-container {
  .item {
    // 每个 item 的高度
    height: 1000px;
    // height: 5000px;
  }
  #anchor-item-0 {
    background-color: red;
  }
  #anchor-item-1 {
    background-color: green;
  }
  #anchor-item-2 {
    background-color: orange;
  }
  #anchor-item-3 {
    background-color: blue;
  }
}

期望行为

滚动的目标位置与实际位置基本一致

报错信息

==================================
目标垂直位置: 50.953125
----------------------------------
滚动前的垂直位置: 1295
期望的垂直滚动距离: -1244.046875
----------------------------------
滚动后的垂直位置: 48
实际的垂直滚动距离: -1247
==================================
==================================
目标垂直位置: 50.953125
----------------------------------
滚动前的垂直位置: 11582
期望的垂直滚动距离: -11531.046875
----------------------------------
滚动后的垂直位置: 26
实际的垂直滚动距离: -11556
==================================

系统信息

👽 Taro v2.1.5


  Taro CLI 2.1.5 environment info:
    System:
      OS: macOS 10.15.4
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 10.20.1 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.4 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 2.1.5 => 2.1.5
      @tarojs/components-qa: 2.1.5 => 2.1.5
      @tarojs/mini-runner: 2.1.5 => 2.1.5
      @tarojs/router: 2.1.5 => 2.1.5
      @tarojs/taro: 2.1.5 => 2.1.5
      @tarojs/taro-alipay: 2.1.5 => 2.1.5
      @tarojs/taro-h5: 2.1.5 => 2.1.5
      @tarojs/taro-qq: 2.1.5 => 2.1.5
      @tarojs/taro-quickapp: 2.1.5 => 2.1.5
      @tarojs/taro-rn: 2.1.5 => 2.1.5
      @tarojs/taro-swan: 2.1.5 => 2.1.5
      @tarojs/taro-tt: 2.1.5 => 2.1.5
      @tarojs/taro-weapp: 2.1.5 => 2.1.5
      @tarojs/webpack-runner: 2.1.5 => 2.1.5
      eslint-config-taro: 2.1.5 => 2.1.5
      eslint-plugin-taro: 2.1.5 => 2.1.5
      nerv-devtools: ^1.5.5 => 1.5.6
      nervjs: ^1.5.5 => 1.5.6
      stylelint-config-taro-rn: 2.1.5 => 2.1.5
      stylelint-taro-rn: 2.1.5 => 2.1.5

补充信息

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[taro-bot]

CC @Littly

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[GoodbyeNJN]

fixed