vue中滚动条始终定位在底部的⽅法
滚动条定位在底部，⾸先想到的是，动态修改滚动条到顶部的距离等于div的⾼度，
代码实现：
var div = ElementById('data-list-content')
div.scrollTop = div.scrollHeight
但是问题来了，滚动条并没有到达底部，⽽是距离底部还有⼀点距离（⼀脸懵逼）
估计是动态加载数据时，数据还未加载，滚动条就已经执⾏，知道原因了，那就实践呗。
第⼆次尝试，利⽤vue的watch监控数据的改变，然后动态修改滚动条到顶部的距离
代码实现：
watch: {
'processData': 'scrollToBottom'
}
scrollToBottom: function () {
var div = ElementById('data-list-content')
jquery滚动条滚动到底部div.scrollTop = div.scrollHeight
}
再次崩溃了，好像没有⽑⽤（陷⼊苦思）。
这个时候我想到了$nextTick 。
简单的介绍下$nextTick：
Vue 实现响应式并不是数据发⽣变化之后 DOM ⽴即变化，⽽是按⼀定的策略进⾏ DOM 的更新。
$nextTick 是在下次 DOM 更新循环结束之后执⾏延迟回调，在修改数据之后使⽤。
既然$nextTick是在下次DOM更新时执⾏的，不正好符合我们的要求嘛（⼩激动）。
代码实现：
watch: {
'processData': 'scrollToBottom'
}
scrollToBottom: function () {
this.$nextTick(() => {
var div = ElementById('data-list-content')
div.scrollTop = div.scrollHeight
})
}
运⾏代码，成功了。
以上这篇vue 中滚动条始终定位在底部的⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。