javascript - Vue 怎么做scrolltop 的滚动动画

问题描述

问 题

做个了需求是点击右侧的item 左边滚动到队员的位置。。
请问怎么可以在滚的时候加一些过度效果。。下面是我的代码

scrollToEl(name){
      let scrollPosition=0
      this.playerlist.forEach((item,index)=>{
        if(item.players_name==name){
          scrollPosition=index
        }
      })
      // this.$refs.index[scrollPosition].scrollIntoView()
      let jump=document.querySelectorAll('.pick-right-item')
      let total=jump[scrollPosition].offsetTop
      console.log(total);
      // Chrome
      document.body.scrollTop = total
    }

这样可以直接滚动到制定位置，但是在vue中怎么做scroll的滚动动画。。

解决方案

非常遗憾的告诉你, scrollTop是js属性, 不是css属性, 所以无法使用transition或者animate去加动画。只能借助一些动画类库, 或者自己编写一个scroll滚动的效果.

可以参考下这:

https://stackoverflow.com/que...

这篇关于javascript - Vue 怎么做scrolltop 的滚动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！