uni-app h5端，onPageScroll监听scrollTop在跳转页面时错误触发onPageScroll事件，导致scrollTop变为了0

操作步骤：

在onPageScroll生命周期里，输出距离顶部距离console.log(e.scrollTop)
滚动滚动条至scrollTop 100（大于0）
点击当前页面上的任意链接如商品详情页，跳转方式是uni.navigateTo()
查看日志输出的地方，console.log(e.scrollTop)会输出0

预期结果：

预期跳转到商品详情页的时候不要触发onPageScroll生命周期，不要将scrollTop变成0

实际结果：

实际结果是当跳转页面时页面上的scrollTop变成了0

bug描述：

在H5端，onPageScroll，在首页监听scrollTop当前距离顶部距离，比如scrollTop滚动到了100，点击页面上的跳转链接会触发onPageScroll生命周期，scrollTop变为了0，返回页面scrollTop又为100
首页页面顶部导航栏背景默认是透明颜色，当scrollTop大于20才改变颜色，但是跳转页面后scrollTop变为了0，导致页面返回后当实际scrollTop大于20时背景也是透明色
真机和微信开发者工具都出现这个问题

开发环境	版本号	项目创建方式
Windows	10 家庭中文版	HBuilderX
浏览器	微信开发者工具	-
平台	微信内置浏览器	-
IDE	HBuilderX	3.3.13
项目	H5	https://app.hujintuan.com/app/#/

htzhanglong 1楼作者

先看onhide先出发还是pagescroll先触发，实在不行给个demo吧这边看一下

htzhanglong 2楼作者

有同样的问题页面切走时, scrollTop变0, 但back回来后, 页面保持了之前的滚动高度, 但是没有onPageScroll事件, scrollTop的值还是0

wuwangju 3楼

在 uni-app 的 H5 端，onPageScroll 事件在页面跳转时可能会错误触发，导致 scrollTop 变为 0。这是因为在页面跳转时，页面可能会重新渲染或重置，导致 onPageScroll 事件被触发。

解决方案

使用 onHide 和 onShow 生命周期钩子：你可以在页面跳转时，通过 onHide 和 onShow 生命周期钩子来控制 onPageScroll 事件的触发。

export default {
    data() {
        return {
            isPageActive: true
        };
    },
    onPageScroll(e) {
        if (this.isPageActive) {
            console.log('ScrollTop:', e.scrollTop);
            // 处理滚动逻辑
        }
    },
    onHide() {
        this.isPageActive = false;
    },
    onShow() {
        this.isPageActive = true;
    }
};

在 onHide 中设置 isPageActive 为 false，在 onShow 中设置为 true，这样在页面跳转时就不会触发 onPageScroll 事件。

使用 uni.$on 和 uni.$off 事件监听：你可以在页面跳转时手动移除 onPageScroll 事件监听，跳转回来时再重新监听。

export default {
    methods: {
        handlePageScroll(e) {
            console.log('ScrollTop:', e.scrollTop);
            // 处理滚动逻辑
        }
    },
    onLoad() {
        uni.$on('pageScroll', this.handlePageScroll);
    },
    onUnload() {
        uni.$off('pageScroll', this.handlePageScroll);
    }
};

在 onLoad 中监听 pageScroll 事件，在 onUnload 中移除监听。

使用 scroll-view 组件：如果你只需要监听某个区域的滚动事件，可以使用 scroll-view 组件，并监听其 scroll 事件。

<scroll-view scroll-y [@scroll](/user/scroll)="handleScroll">
    <!-- 内容 -->
</scroll-view>

export default {
    methods: {
        handleScroll(e) {
            console.log('ScrollTop:', e.detail.scrollTop);
            // 处理滚动逻辑
        }
    }
};

这样可以避免全局的 onPageScroll 事件触发问题。

延迟处理 onPageScroll 事件：如果 onPageScroll 事件在页面跳转时被触发，你可以通过延迟处理来避免误判。

export default {
    data() {
        return {
            scrollTop: 0,
            isPageActive: true
        };
    },
    onPageScroll(e) {
        if (this.isPageActive) {
            setTimeout(() => {
                this.scrollTop = e.scrollTop;
                console.log('ScrollTop:', this.scrollTop);
                // 处理滚动逻辑
            }, 100);
        }
    },
    onHide() {
        this.isPageActive = false;
    },
    onShow() {
        this.isPageActive = true;
    }
};