前端JavaScript的技术技巧交流~

scrollTop到指定位置的平滑处理的记录

2018-12-20  本文已影响0人  chouchou723

直接贴代码了,因为是vue里写的,应该能看懂

 goto(type) {//先获取指定位置的offsetTop
                let final = this.$refs[type].offsetTop;
                this.smoothUp(final)
            },
 smoothUp(final) {//然后通过speed来设置平滑速度,requestAnimationFrame保证流畅度
                let now = this.$refs.groups.scrollTop;
                let speed = Math.floor((now - final) / 8);
                this.$refs.groups.scrollTop -= speed;
                if (now - final > 10 || final - now > 10) { //控制到什么位置之前一直滑动
                    this.raf = window.requestAnimationFrame(this.smoothUp.bind(this, final))
                }else{//到位置后取消动画作为优化
                    window.cancelAnimationFrame(this.raf);
        }
            },
上一篇 下一篇

猜你喜欢

热点阅读