【bug】uni.pageScrollTo(selector)滚动定位的位置错误

[cucuzi]

版本信息

HbuilderX 4.15
uni-ui 1.5.0

代码片段

<template>
  <view>
    <view>
      <view v-for="i in 40" :key="'b0'+i">
        <text>红凤凰粉凤凰红粉凤凰花凤凰</text>
      </view>
    </view>
    <view id="main-box0">
      <view v-for="i in 40" :key="'b1'+i">
        <text>红鲤鱼与绿鲤鱼与驴</text>
      </view>
    </view>
    <view id="main-box1">
      <view v-for="i in 100" :key="'b2'+i">
        <text>The quick brown fox jumps over the lazy dog</text>
      </view>
    </view>
    <view id="main-box2">
      <view v-for="i in 100" :key="'b3'+i">
        <text>吃葡萄不吐葡萄皮</text>
      </view>
    </view>
    <uni-popup ref="popup" background-color="#FFF" type="right" safe-area borderRadius="20px 0 0 20px">
      <view class="popup-wrapper">
        <scroll-view scroll-y="true" class="scroll-Y">
          <view class="catalog-body">
            <view class="catalog-item" @click="handleScrollTo('#main-box0')">
              <uni-icons type="forward" size="20"></uni-icons>
              <text>indexof 0</text>
            </view>
            <view class="catalog-item" @click="handleScrollTo('#main-box1')">
              <uni-icons type="forward" size="20"></uni-icons>
              <text>indexof 1</text>
            </view>
            <view class="catalog-item" @click="handleScrollTo('#main-box2')">
              <uni-icons type="forward" size="20"></uni-icons>
              <text>indexof 2</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.$refs.popup.open()
  },
  methods: {
    handleScrollTo(value) {
      uni.pageScrollTo({
        selector: value,
        success: (data) => {
          console.log('success' + JSON.stringify(data))
        },
        fail: (data) => {
          console.log('fail' + JSON.stringify(data))
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.popup-wrapper {
  width: 70vw;
  padding: 20px 0 0 20px;
  display: flex;
  flex-direction: column;
  height: 100%;

  &-header {
    padding-right: 20px;
    font-size: 20px;
    line-height: 1;
    margin-bottom: 20px;
  }

  .scroll-Y {
    max-height: calc(100vh - var(--window-top) - var(--window-bottom) - 40px);

    ::-webkit-scrollbar {
      display: block;
      width: 0 !important;
      height: 0 !important;
      background: transparent;
      overflow: auto !important;
    }

    .catalog-body {
      padding-bottom: 20px;

      .catalog-item {
        font-size: 20px;
        line-height: 2.5;
      }
    }
  }
}
</style>

复现步骤

点击indexof 0、indexof 1不会跳转，点击indexof2会跳转到id="main-box1"的位置

https://github.com/dcloudio/uni-app/assets/48954949/d07174dd-3fd1-421b-9097-8e1bc1ce6cf1

个人猜测

可能是滚动定位的位置计算了元素本身的高度。
如果将id放到内部的第一个元素，那么定位的位置就是该元素的高度。下面为该猜测的测试代码：

...
    <view>
      <view id="main-box0">
        <text>红鲤鱼与绿鲤鱼与驴</text>
      </view>
      <view v-for="i in 39" :key="'b1'+i">
        <text>红鲤鱼与绿鲤鱼与驴</text>
      </view>
    </view>
    <view>
      <view id="main-box1">
        <text>The quick brown fox jumps over the lazy dog</text>
      </view>
      <view v-for="i in 99" :key="'b2'+i">
        <text>The quick brown fox jumps over the lazy dog</text>
      </view>
    </view>
    <view>
      <view id="main-box2">
        <text>吃葡萄不吐葡萄皮</text>
      </view>
      <view v-for="i in 99" :key="'b3'+i">
        <text>吃葡萄不吐葡萄皮</text>
      </view>
    </view>
...

https://github.com/dcloudio/uni-app/assets/48954949/2cea9f5b-45df-413d-b546-1d9f8a239ba0

[Otto-J]

感谢反馈，你提供了复现代码，请补充更多信息：

• [ ] 这个你测试是多平台有问题，还是特定的平台有问题？
• [ ] 使用的 vue2 还是 vue3

[cucuzi]

感谢反馈，你提供了复现代码，请补充更多信息：

• [ ] 这个你测试是多平台有问题，还是特定的平台有问题？
• [ ] 使用的 vue2 还是 vue3

这个你测试是多平台有问题，还是特定的平台有问题？

h5平台。刚刚在钉钉小程序测试没有这个问题。其他平台由于条件有限现在没测试。

使用的 vue2 还是 vue3

vue2

[elarbor]

我也是，点击没反应