Vue 怎么做scrolltop 的滚动动画

Question

做个了需求是点击右侧的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的滚动动画。。

Answer 1

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

可以参考下这:

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

Answer 2

今天我也刚好遇到这个问题，把它做成了 vue 组件，带滚动动画完美解决，以下是完整代码：

export default {
  name: 'ScrollTop',
  data() {
    return {
      // 定义滚动条默认位置
      scrollTop: null,

      // 定义按钮默认状态
      isScrollTop: false
    }
  },
  props: {
    el: String
  },
  mounted() {
    // 监听滚动事件
    window.addEventListener('scroll', () => {
      this.scrollTop = document.documentElement.scrollTop ||
                        window.pageYOffset ||
                        document.body.scrollTop ||
                        document.querySelector(this.el).scrollTop;

      // 控制滚动按钮的隐藏或显示
      if (this.scrollTop > 150) {
        this.isScrollTop = true;
      } else {
        this.isScrollTop = false;
      }
    }, true);
  },
  methods: {
    /**
     * 滚动到顶部
     */
    scrollToTop() {
      let $this = this;

      // 返回顶部动画特效
      setTimeout(function animation() {
        if ($this.scrollTop > 0) {
          setTimeout(() => {

            // 步进速度
            $this.scrollTop = $this.scrollTop - 30;

            // 返回顶部
            if(document.documentElement.scrollTop > 0) {
              document.documentElement.scrollTop = $this.scrollTop - 30;
            } else if (window.pageYOffset > 0) {
              window.pageYOffset = $this.scrollTop - 30;
            } else if (document.body.scrollTop > 0) {
              document.body.scrollTop = $this.scrollTop - 30;
            } else if (document.querySelector($this.el).scrollTop) {
              document.querySelector($this.el).scrollTop = $this.scrollTop - 30;
            }

            animation();
          }, 1);
        }
      }, 1);
    }
  }
};

Answer 3

可滚动元素使用scrollTo的 behavior属性可以做滚动动画

#el.scrollTo({ top: 0, behavior: 'smooth' })

Answer 4

动画不外乎就是增加或删除一些动画类名，vue切换元素类名很简单吧，你甚至可以直接给过渡元素的父元素加上一个transtion:all 0.3s;看看效果