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

直接贴代码了,因为是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);
        }
            },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 2018年10月份,好像是个多事的月份,23号的港珠澳大桥仪式正式开通,宣告了港珠澳大湾地区未来金融会得到极大的...
    菲茨爱读书阅读 4,221评论 0 1
  • 背负着太过沉重的爱,生活太累,所以我选择与自己和解,我把对你的爱都放在心里,我再也不会去触碰那逝去的三年
    小草_3b17阅读 1,319评论 0 0
  • 女人一提到生孩子带娃那段日子,简直就是活灵灵的血泪史啊!身材走样,孩子哭闹,连续几个月的夜里睡不好,白天接着带宝宝...
    林清因阅读 3,012评论 8 2
  • 自己返回 Promise Promise 深入阅读:http://www.cnblogs.com/hustskyk...
    _William_Zhang阅读 1,540评论 0 0
  • Me before you 很少看到观念很合的爱情片,这部《Me before you》算是其中之一。 ...
    无赖人阅读 5,579评论 0 14

友情链接更多精彩内容