scrollTo 的时间漏洞

问题

最近在写一个自动更新的消息列表组件,里面使用到了 scrollTo 这个方法,scrollTo 里面呢,有一种平滑过渡的模式:

js 复制代码
// .vue 文件

this.$refs.scroll.scrollTo({
  top: 100,
  behavior: 'smooth'
})

这种模式会让你在设置滚动距离时自带滑动的过渡效果,像"回到顶部" 或者 "卯点滑动" 这些功能,用它来实现会异常简单。

但是呢,这个方法也有一些缺点:

  1. 过渡时间无法自定义
  2. 没有提供回调函数插口

这会导致一些问题,比如消息列表组件在每次有更新推送过来时,需要先将列表滚动至顶部,然后再执行新消息的动画,因为我们现在既没有办法定义 scrollTo 的过渡执行时间,又没有回调函数插口可用,所以我们不知道列表滚动至顶部什么时候执行完的,什么时候执行新消息的动画就成了个坑。

这个问题貌似有点偏蔽,以至于我找了一圈,显有收获,最后终于在一个大哥的老帖里发现了希望,大哥说,这个时间呢,没有的,这个回调呢,也是没有的,但是,它有事件!!!

划重点了啊,事件scrollTo 这个方法在执行完成之后,会触发 scrollend 事件。

哎呀呀,千帆依始尽入夜,一浆划得天地开。接下来,我们就来来好好利用一下这个事件:

js 复制代码
// .vue 文件

scrollWait (El) {
  return new Promise(resolve => {
    const wait = () => {
      El.removeEventListener('scrollend', wait)
      resolve(true)
    }

    El.addEventListener('scrollend', wait)
  })
}

这样,我们在每次执行完 scrollTo 之后,调用一下 scrollWait

js 复制代码
// .vue 文件

async goScroll (top = 0) {
    
    const El = this.$refs.scroll
    
    El.scrollTo({
      top,
      behavior: 'smooth'
    })
    
    await this.scrollWait(El)
    
    // 其他执行逻辑
    // ...
    
}

写在最后

最后,我们还是来回眸瞅一眼 scrollTo

  1. scrollToElement 基类上的方法,它的调用主体是元素
  2. scrollTo 支持两种使用方式:
js 复制代码
// 1. 简写式

El.scrollTo (x, y) // x 左滑动距离,y 上滑动距离

// 2. 配置式

scrollTo ({
   top: 100, // Number
   left: 0, // Number
   behavior: 'smooth' // smooth | instant | auto
})

好了,今天的内容就讲到这里了,若有纰漏之处,望各位掘友不吝指正,提携本小蚂蚁奋进,另外,也欢迎各路大佬浅谈新思路,与大家共勉。

相关推荐
li35749 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj9 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel9 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel9 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
^Rocky10 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵11 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld11 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记11 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
东风西巷12 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求