如何辦理網(wǎng)站備案手續(xù)怎么做網(wǎng)絡(luò)推廣最有效
需求描述:在開(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( ̄▽ ̄)d