Vue中监听滚动事件

背景

最近在做提分加的预览页面时，有一个用于实现锚点定位的侧边栏导航，而在页面滚动时，侧边导航也需要随着页面的滚动而激活相应的模块，这就需要监听页面的滚动事件了。

解决

• 监听滚动事件

  mounted() {
  //监听页面滚动事件
  window.addEventListener('scroll', this.appScroll)
  //注意：如果由于自己的vue中的样式导致监听不到，可以尝试监听body或者'#app-root'的滚动事件
  }

• 获取元素到顶部的距离

  //浏览器兼容
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

• 根据业务逻辑实现相应的事件

  我在做到这一块的时候遇到了一个问题，由于有些时候我的最后一个模块内容很少，导致高度不足，以至于滚动到页面底部时侧边导航依旧时定位到倒数第二个模块上的，于是我加上了这样一段代码，判断到页面到底部时的状态。

  //如果到底了直接给最后一个
  if(document.documentElement.scrollHeight - document.documentElement.clientHeight == document.documentElement.scrollTop){
  this.activeBtn = 3
  }

参考文章：vue监听滚动事件 实现某元素吸顶或者固定位置显示