h5滚动导致setTimeout设置的动画错乱

最新推荐文章于 2021-08-07 15:28:25 发布

原创最新推荐文章于 2021-08-07 15:28:25 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

h5混合应用开发专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种在网页滚动时暂停动画并在滚动停止后恢复动画的技术方案。通过监听滚动事件，利用setTimeout确保滚动完全停止，避免了动画在滚动过程中造成用户体验不佳的问题。

解决思路，在滚动的时候停止播放动画，在滚动停止的时候恢复动画显示

addEventScorll() {
      let t1 = 0;
        let t2 = 0;

        document.onscroll = function() {
            clearTimeout(this.time);
            t1 = document.documentElement.scrollTop || document.body.scrollTop;
        }

        function isScrollEnd() {
            t2 = document.documentElement.scrollTop || document.body.scrollTop;
            if(t2 == t1){
            // 滚动停止
                this.setCurrentOne()
            }
        }
    },