原文鏈接： 點我
頁面中有這么一個需求，當頁面滾動到一定高度之后，頁面中的某些元素進行吸頂，固定到頂部位置，或者是滾動到一定程度進行更新數據的操作。
我相信不少網友查閱過類似的資料，網友給出的解決方案，很多都是在mounted中添加
1 window.addEventListener("scroll", this.handleScroll);
試了好多方法都不行，結果是我css樣式寫的有問題；
剛開始有用后來沒用，之后排查發現是我給body設置了overflow：scroll（hidde）屬性
采用這種形式來實現頁面監聽滾動的效果。
筆者最初也是采用了這種方式，剛開始可以實現想要的效果，后來，莫名其妙的就不可用了，經過一番探討，使用監聽組件滾動的形式來解決這個問題，至於通過window來實現監聽為什么突然就不可用了，筆者暫時還不清楚什么原因造成的，有知道原因的歡迎留言。
想要實現監聽組件滾動的效果，首先需要給需要監聽的組件添加ref,以便可以通過this.$refs的形式拿到該元素的dom節點。
以簡單示例來說明，有一個a.vue的組件，我想監聽這個組件的滾動，那么在該組件的容器元素上添加ref=”a”,然后通過下面的代碼形式來操作：
1 // 通過$refs獲取dom元素 2 this.box = this.$refs.a 3 // 監聽這個dom的scroll事件 4 this.box.addEventListener('scroll', () => { 5 this.handleScroll(); 6 }, false)
上述代碼為處理組件滾動監聽的主要代碼內容。
1 handleScroll() { 2 // 這是一個示例代碼，打印出監聽滾動的組件滾動距離 3 var scrollTop = this.$refs.a.scrollTop; 4 console.log(scrollTop); 5 }
同樣的道理，如果想對a.vue組件內部的某一塊結點區域進行滾動監聽，也是采用這種方式。
注意點：
如果采用了上述方案沒有實現監聽滾動的效果，請檢查是否出現以下問題：
需要監聽滾動的元素結點是否給了height和overflow:scroll
需要監聽滾動的元素結點的父元素結點是否設置了高度
在vux中，如果你使用了view-box，你需要給view-box一個高度，因為view-box的父元素高度為100%，所以筆者采取的方案就是將view-box的高度也設置為100%。
1 <view-box ref="viewBox" style="height: 100%;"> 2 <router-view></router-view> 3 </view-box>
經檢測，此方案有效。