需求描述：在開(kāi)發(fā)中我們常常會(huì)遇到需要讓滾動(dòng)條保持到最底端的需求，比如在開(kāi)發(fā)一個(gè)聊天框時(shí)，請(qǐng)求接口拿到消息列表數(shù)據(jù)，展示到前端頁(yè)面時(shí)，需要讓滾動(dòng)條自動(dòng)滾到最底端，以此來(lái)展示最后的聊天記錄。同時(shí)，當(dāng)發(fā)送一條新的消息時(shí)，也需要滾動(dòng)條自動(dòng)滾動(dòng)到最底端，默認(rèn)顯示到最后一條數(shù)據(jù)，而不是在發(fā)送完一條新消息之后還需要手動(dòng)滑動(dòng)滾動(dòng)條到最底端。

主要實(shí)現(xiàn)原理：

其實(shí)這個(gè)需求就是需要設(shè)置該元素（產(chǎn)生滾動(dòng)條的元素）的scrollTop 等于scrollHeight

主要代碼：

<template><div ref="box" class="box"></div>
</template>

<script>// 滾動(dòng)到底部scrollToBottom() {// 這里是Vue2的寫(xiě)法const box = this.$refs.box as HTMLElementthis.$nextTick(() => {box.scrollTop = box.scrollHeight})}
</script>

<style>
.box {overflow: auto;height: 446px;  /*重要！一定要有高度才會(huì)生成滾動(dòng)條*/}</style>

注意事項(xiàng)：

box容器必須設(shè)置具體的高度height，否則不會(huì)產(chǎn)生滾動(dòng)條，（如果頁(yè)面上看有滾動(dòng)條，那可能是父元素產(chǎn)生的滾動(dòng)條），如果沒(méi)有給box容器設(shè)置高度的話(huà)，這個(gè)scrollToBottom方法就不會(huì)生效！

如果本篇博客對(duì)你有幫助，請(qǐng)點(diǎn)個(gè)贊吧o(￣▽￣)ｄ