uni-app dom.scrollToElement 滚动失效

uni-app dom.scrollToElement 滚动失效

开发环境 版本号 项目创建方式
Windows window10家庭版 HBuilderX

操作步骤：

  • dom.scrollToElement 如果第一个参数是在第一屏的元素，则不会滚动，如果第一个参数不是在第一屏的话会触发滚动。

预期结果：

  • 希望能滚动

实际结果：

  • 不能滚动

bug描述：

  • dom.scrollToElement 如果第一个参数是在第一屏的元素，则不会滚动，如果第一个参数不是在第一屏的话会触发滚动。

更多关于uni-app dom.scrollToElement 滚动失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

ios没有此问题，只有安卓会有 ，鸿蒙系统也会

更多关于uni-app dom.scrollToElement 滚动失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请提供简单可复现的完整示例（上传附件），方便我们快速排查问题哦。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

<template> <view class="flex-1"> <view class="item" [@click](/user/click)="scrollTo"> 按一下 </view> <list> <cell v-for="(item, index) in 50" :ref="'item' + index"> <view class="item">{{ index }}</view> </cell> </list> </view> </template>
<script> const dom = uni.requireNativePlugin('dom'); export default { data() { return {}; }, methods: { scrollTo() { console.log(1212); dom.scrollToElement(this.$refs.item2[0], { offset: 100 }); this.$nextTick(() => { this.$forceUpdate(); }); } } }; </script>
<style> .flex-1 { flex:1; } .item { height: 100rpx; border-bottom: 1rpx solid #ccc; } </style>

安卓 通过测试发现 scrollTo执行之后 不会马上跳到定位元素 要触发下scroll事件 就能到定位

附件

已反馈给相关人员排查，已加分，感谢您的反馈！

又不行了

HBuilderX Alpha 3.4.6 已修复

好的，这个 正式版大概多久会发布

回复 5***@qq.com: HBuilderX 3.4.6正式版已发布

在使用 uni-app 开发时，dom.scrollToElement 方法用于将页面滚动到指定元素的位置。如果发现 scrollToElement 滚动失效，可能是由于以下几个原因导致的。以下是一些常见的问题和解决方法：

1. 元素未渲染完成

  • 如果元素还未渲染完成，scrollToElement 可能无法找到目标元素。
  • 解决方法：确保在元素渲染完成后再调用 scrollToElement。可以使用 this.$nextTick 确保 DOM 更新完成。
this.$nextTick(() => {
    uni.createSelectorQuery().select('#targetElement').boundingClientRect(data => {
        uni.pageScrollTo({
            scrollTop: data.top,
            duration: 300
        });
    }).exec();
});

2. 目标元素未设置 id 或 class

  • scrollToElement 需要通过 id 或 class 来定位元素。如果目标元素没有设置 id 或 class，则无法找到。
  • 解决方法：为目标元素设置 id 或 class。
<view id="targetElement">目标元素</view>

3. 页面未启用滚动

  • 如果页面没有启用滚动（例如 scroll-view 未设置高度或 page 未设置 overflow: auto），scrollToElement 将无法生效。
  • 解决方法：确保页面或 scroll-view 可以滚动。
<scroll-view scroll-y style="height: 100vh;">
    <view id="targetElement">目标元素</view>
</scroll-view>

4. scrollToElement 参数错误

  • scrollToElement 的参数可能设置不正确，例如 offsetTop 或 duration 未正确配置。
  • 解决方法：检查参数设置。
uni.createSelectorQuery().select('#targetElement').boundingClientRect(data => {
    uni.pageScrollTo({
        scrollTop: data.top,
        duration: 300
    });
}).exec();

5. 平台兼容性问题

  • uni-app 在不同平台（如 H5、小程序、App）上的实现可能有所不同，某些平台可能不支持 scrollToElement。
  • 解决方法：使用 uni.pageScrollTo 替代 scrollToElement，它是跨平台的。
uni.createSelectorQuery().select('#targetElement').boundingClientRect(data => {
    uni.pageScrollTo({
        scrollTop: data.top,
        duration: 300
    });
}).exec();

6. 目标元素在 scroll-view 中

  • 如果目标元素在 scroll-view 中，scrollToElement 可能无法直接生效。
  • 解决方法：使用 scroll-view 的 scroll-into-view 属性。
<scroll-view scroll-y style="height: 100vh;" :scroll-into-view="targetId">
    <view id="targetElement">目标元素</view>
</scroll-view>

export default {
    data() {
        return {
            targetId: ''
        };
    },
    methods: {
        scrollToElement() {
            this.targetId = 'targetElement';
        }
    }
};

7. 目标元素高度为 0

  • 如果目标元素的高度为 0（例如空元素），scrollToElement 可能无法正确滚动。
  • 解决方法：确保目标元素有内容或设置高度。
<view id="targetElement" style="height: 100px;">目标元素</view>

8. 异步数据未加载完成

  • 如果目标元素的内容是通过异步数据加载的，可能在数据加载完成前就调用了 scrollToElement。
  • 解决方法：在数据加载完成后再调用 scrollToElement。
this.loadData().then(() => {
    this.$nextTick(() => {
        uni.createSelectorQuery().select('#targetElement').boundingClientRect(data => {
            uni.pageScrollTo({
                scrollTop: data.top,
                duration: 300
            });
        }).exec();
    });
});
回到顶部