前端滚动的方法（无兼容性问题）

Vue 开发，有时候只需要监听某个元素是否滚动就行了，不需要去监听整个页面。

Vue 有自带的 @scroll 但是并没有什么用，给某个滚动元素加上，滚动该元素并不会调用，加上 CSS 支持滚动样式也一样。

怎么监听呢？通过 addEventListener 与 @mousewheel 配合实现

<template>
  <!-- 滚动视图 -->
  <div class="scrollview" ref="scrollview" @mousewheel="scrollChange">
    <!-- 内容区域 -->
    <div class="content"></div>
  </div>
</template>

<script>
export default {
  mounted () {
    // 获取指定元素
    const scrollview = this.$refs['scrollview']
    // 添加滚动监听，该滚动监听了拖拽滚动条
    // 尾部的 true 最好加上，我这边测试没加 true ，拖拽滚动条无法监听到滚动，加上则可以监听到拖拽滚动条滚动回调
    scrollview.addEventListener('scroll', this.scrollChange, true)
  },
  // beforeDestroy 与 destroyed 里面移除都行
  beforeDestroy () {
    // 获取指定元素
    const scrollview = this.$refs['scrollview']
    // 移除监听
    scrollview.removeEventListener('scroll', this.scrollChange, true)
  },
  methods: {
    // 滚动监听
    scrollChange () {
      console.log('滚动中')
    }
  }
}
</script>

***如果要滚动某个节点的要作对应的改动scrollTop 的对象
1.最佳方法（vue）兼容性好
document.documentElement.scrollTop = num;

// 锚点跳转
    async goScroll(anchor) {
      let target = document.getElementById(anchor);
      let currentTop = document.documentElement.scrollTop;
      let targetTop = target.offsetTop - 200;
      console.log(target.offsetTop);

      let num = currentTop;
      this.timeObj = setInterval(() => {
        if (targetTop > currentTop) {
          // 向下滚动
          num = num + 8;
          if (num > targetTop) {
            clearInterval(this.timeObj);
          }
        } else {
          // 向上滚动
          num = num - 8;
          if (num < targetTop) {
            clearInterval(this.timeObj);
          }
        }
        document.documentElement.scrollTop = num;
      }, 1);
      // window.scrollTo(0, target.offsetTop - 200);
    },

2.window.scrollTop (0,num)

// 锚点跳转
    async goScroll(anchor) {
   	  // anchor是元素id
      let target = document.getElementById(anchor);
      let currentTop = document.documentElement.scrollTop;
      let targetTop = target.offsetTop - 200;
      console.log(target.offsetTop);

      let num = currentTop;
      this.timeObj = setInterval(() => {
        if (targetTop > currentTop) {
          // 向下滚动
          num = num + 8;
          if (num > targetTop) {
            clearInterval(this.timeObj);
          }
        } else {
          // 向上滚动
          num = num - 8;
          if (num < targetTop) {
            clearInterval(this.timeObj);
          }
        }
        window.scrollTop (0,num) 
      }, 1);
      // window.scrollTo(0, target.offsetTop - 200);
    },

3.Element.scrollIntoView()

      goScroll(anchor) {
        console.log('hhh',anchor)
        let target = document.getElementById(anchor)
        console.log('target',target)
        target.scrollIntoView({
          behavior: "smooth",
          inline: "start",
          block: "start"
        })
      },

4. 锚点跳转：当前url加# 锚点值