vue3 el-table自动滚动在谷歌游览器不生效的bug

想一个不重名的名字

已于 2023-07-03 17:30:36 修改

阅读量420

点赞数 2

文章标签： bug javascript

于 2023-06-07 19:15:00 首次发布

本文链接：https://blog.csdn.net/qq_47099087/article/details/131085982

版权

遇到一个bug 恶心了一上午，需求是将element-plus的el-table做一个滚动效果，想着很简单的一个需求，键盘一顿敲就完成了，效果和代码如下：

autoRoll(stop) {
    this.rollParams = {
        rollPx: 0.3,
        rolltimer: void 0,
        rollTime: 0.3,
    }
    if (stop || !this.userData.length) {
      cancelAnimationFrame(this.rollParams.rolltimer)
      return
    }
    const scrollbar = this.$refs.btmRightPanel.querySelector('.el-scrollbar__wrap') 
    const step = this.rollParams.rollPx
    const anmiation = () => {
    scrollbar.scrollTop += step
    if (scrollbar.clientHeight + scrollbar.scrollTop === scrollbar.scrollHeight) {
        scrollbar.scrollTop = 0
    }
    this.rollParams.rolltimer = requestAnimationFrame(anmiation)
    }
    anmiation()
}

到这里本来已经完了，结果测试发现在谷歌游览器没有自动播放，原因是每次移动的px不能小于1，所以要把rollpx改成1，才可以。