滾動條定位在底部，首先想到的是，動態修改滾動條到頂部的距離等于div的高度，
代碼實現：
var div = document.getElementById('data-list-content')div.scrollTop = div.scrollHeight但是問題來了，滾動條并沒有到達底部，而是距離底部還有一點距離（一臉懵逼）
估計是動態加載數據時，數據還未加載，滾動條就已經執行，知道原因了，那就實踐唄。
第二次嘗試，利用vue的watch監控數據的改變，然后動態修改滾動條到頂部的距離
代碼實現：
watch: { 'processData': 'scrollToBottom' } scrollToBottom: function () { var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight }再次崩潰了，好像沒有毛用（陷入苦思）。
這個時候我想到了$nextTick 。
簡單的介紹下$nextTick：
Vue 實現響應式并不是數據發生變化之后 DOM 立即變化，而是按一定的策略進行 DOM 的更新。
$nextTick 是在下次 DOM 更新循環結束之后執行延遲回調，在修改數據之后使用 。
既然$nextTick是在下次DOM更新時執行的，不正好符合我們的要求嘛（小激動）。
代碼實現：
watch: { 'processData': 'scrollToBottom' } scrollToBottom: function () { this.$nextTick(() => { var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight }) }運行代碼，成功了。
以上這篇vue 中滾動條始終定位在底部的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
