第一次寫自己的原創技術部落格，歡迎大家批評指正。

最近在用VUE框架做一個移動端的單頁面應用，專案中碰到了一個關於滾動載入的問題，由於某些原因，用已有的滾動載入的框架實現不了UI小GG設計出來的效果，無奈之下只能自己去摸索。

在網上面看了很久，發現滾動載入的關鍵就是如何去判斷使用者已經下拉到內容的最底部。在網上搜索資料，發現很多方法都是基於頁面本身，但筆者的專案中，這個滾動載入是放在元件中的一個<div></div>中，所以網上的大部分資料都不適用。最後找到了這個。這裡是連結地址，裡面的一張作者的手繪圖給了我很大的啟發。

在VUE中，v-on是進行事件繫結的，在這裡面有一個scroll事件。首先，我們要做的就是把這個事件繫結到目標塊級元素上面去。具體程式碼：<div @scroll="yourmethod"></div>。

這個方法會預設傳入一個event引數。筆者在方法中使用了console.log(e);列印了一下這個事件物件。

然後控制檯的顯示如下面這幾張圖：

如圖所示，我們在能在這個事件裡面的target屬性中輕鬆的拿到scrollTop，offsetHeight和scrollHeight（筆者的理解就是塊級元素中內容撐開的高度）。當然這裡有一個前提，就是你要展示的內容必須是要大於塊級元素預設的高度，然後這樣設定overflow:auto。

至此，我們可以得到一個公式，scrollHeight = scrollTop + offsetHeight。後面這個offsetHeight具體說應該是可視高度，視具體情況而定，由於筆者的專案中這個塊級元素的高度，直接設定成了裝置的高度，即：height：100vh;如果是在自己的專案中，這個高度應該是塊級元素的高度。不過這個vh這個單位好像 還是可能引發一些相容性的問題，建議慎重使用。

後面的載入過程就相對簡單了，只要當scrollTop + offsetHeight>=scrollHeignt時，我們去向後臺申請資料就好了。這不是這篇部落格的重點，要是有興趣的可以在下面留言，我們一起交流，一起進步。