原生js在vue中监听滚动条，以及用vue的思想监听滚动条。

2019年10月28日更新。
之前用的方法类似于用jq直接操作dom的方法。而在vue的思想中，vue希望开发人员可以专注与业务逻辑和数据的开发(ViewModel)，避免直接操作到dom。所以，以下是改进的方法。
1.首先我先创建一个类名，并且添加样式，.z-scroll{ background-color: #0052ff; } 然后在data里面定义一个属性data () { return { isScroll: false } }, 然后使用动态添加类名的方法给这个滚动条添加动态样式

 <div class="head-search head-search-zindex" :class="{'z-scroll':isScroll}">

js的方法代码如下：

mounted () {
    /* 监听滚动条事件 */
    let _this = this
    window.onscroll = function () {
      _this.handleScroll()
    }
  },
  methods: {
    handleScroll () {
      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
      if (scrollTop > 20) {
        this.isScroll = true
      } else {
        this.isScroll = false
      }
    }
    }

本质上看这和下面的方法是一样的效果，但是实质上却是两种不同的思想，个人还是建议使用上面的这种方法。

----------------------------------------------------------------------------------------------------------分割线

1.首先你要明白是哪一个元素产生了滚动条，要监听的就是这一个滚动条的元素

举个例子，当滚动条滚动的时候，我将会改变这个id为search-scroll的背景颜色，那么我将要监听产生滚动条的元素。

产生滚动条的元素的如下：

可以看到它的id为wrapper-scroll，那么方法如下：

mounted(){
    var scrooll = document.getElementById('wrapper-scroll')
    // addEventListener() 方法用于向指定元素添加事件句柄。
    scrooll.addEventListener('scroll', this.handleScroll)
},
methods:{
     handleScroll () {
      var scrooll = document.getElementById('wrapper-scroll') // 获取滚动条的元素
      var scrollup = document.getElementById('search-scroll') // 获取要改变背景的元素
      // 当滚动到距离顶部20px时，返回顶部的锚点显示，scrollTop为元素滚动条内的顶部隐藏部分的高度
      if (scrooll.scrollTop >= 20) {
        scrollup.style.backgroundColor = '#0052ff'               // 改变背景颜色
      } else {
        scrollup.style.backgroundColor = 'transparent'           // 恢复正常
      }
    }
}

结果如下,但滚动隐藏的高度大于20px的时候，背景颜色就改变了。