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

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

相关推荐
伍哥的传说11 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783813 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊25 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿1 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉1 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为