滾動條定位在底部，首先想到的是，動態修改滾動條到頂部的距離等于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 中滾動條始終定位在底部的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。