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
})

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

相关推荐
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript