监听元素滚动事件，设置锚点

1.首先监听元素的滚动事件

 mounted() {
        let element = document.getElementById('scroll-box')
        element.addEventListener('scroll', (e) => {
            this.handleScroll(e)
        })
  },
  
methods:{
    handleScroll(e) {
        let scrollTop = e.target.scrollTop;  //距顶部
        let clientHeight = e.target.clientHeight; //可视区高度
        let scrollHeight = e.target.scrollHeight; //滚动条总高度
        if ((scrollHeight - scrollTop - clientHeight) < 10) {
            this.isBottom = true  //表示是否浏览过底部
         }
     },
}

1. 不能在create中监听，因为拿不到DOM元素。 

2. 如果想在监听函数中，对data区的变量进行变动，就要把回调函数封装出去，因为在mounted中无法改变data数据.
3. 最好不要使用scrollOn监听，用该种方法监听，在暴漏出去的函数中，仍谈无法改变data数据。最好用addEventListener。 

4. 监听滚动到底部  srcollHeight-clienHeight- scrollTop ==0 ，我设置了10px的误差

2.设置锚点

<div class="scroll-box" id="scroll-box">
    <div class="test" id="test">
        噜噜噜
    </div>
    ...省略一堆噜噜噜
<div>



methods：{
 // 滚到具体位置函数
  setTab(tab) {
      const argu = document.getElementById(`${tab}`);
      const y = argu.offsetTop //元素到滚动父元素的距离
      let element = document.getElementById('scroll-box')
      element.scrollTo({
         top: y,
         behavior: 'smooth'
      })
 },
}

1.element.offsetTop为指定元素到滚动复原的距离

2.scrollTo中的behavior 代表滚动效果