vue 滚动监听某个元素及到页面顶部的距离，解决级联选择器滚动下拉框分离问题

先说一下.addEventListener(“事件”,函数处理,布尔类型)
第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播

mounted () {//给window添加一个滚动滚动监听事件
  window.addEventListener('scroll', this.handleScroll, true)
},

methods: {
  handleScroll () { //改变元素#searchBar的top值
	let top = this.$refs.newConBox.$el.getBoundingClientRect().top
	// 或者通过id获取 document.querySelector('#box').getBoundingClientRect().top
  }
},
destroyed () {//离开该页面需要移除这个监听的事件
  window.removeEventListener('scroll', this.handleScroll, true)
}

我使用这个监听是修复级联选择器滚动时，弹窗内容分离问题
解决方法是：
在 cascader组件中，添加 popper-class="cascaderClass" 添加了一个类名，即级联选择器下拉框的类名

handleScroll () { //改变元素#searchBar的top值
	// box.clientHeight为输入框的高度
	let top = this.$refs.newConBox.$el.getBoundingClientRect().top + box.clientHeight
	// 或者通过id获取 document.querySelector('#box').getBoundingClientRect().top
	let cascaderClass = document.querySelector('.cascaderClass')
    cascaderClass.style.top = offsetTop + 'px'
  }

这样滚动页面后，就会动态更新top值，就不会出现分离的问题了。