1:场景描述:开发业务中需要通过按钮点击增加输入栏,当过多时,新增的输入栏在最底部,这时直接控制滚动到底部可省去用户操作。
<div ref="scrollDiv">
...
</div>
2:在点击事件中编写如下代码
// 滚动到顶部
handleScrollTop() {
this.$nextTick(() => {
let scrollElem = this.$refs.scrollDiv; // 对应ref的命名
scrollElem.scrollTo({ top: 0, behavior: 'smooth' });
});
},
// 滚动到底部
handleScrollBottom() {
this.$nextTick(() => {
let scrollElem = this.$refs.scrollDiv; // 对应ref的命名
scrollElem.scrollTo({ top: scrollElem .scrollHeight, behavior: 'smooth' });
});
}