vue滚动条滚动底部
时间: 2023-11-17 14:08:02 浏览: 110
vue 中滚动条始终定位在底部的方法
要让Vue滚动条滚动到底部,可以使用以下两个步骤:
1. 在滚动条所属的div上加上ref属性,例如:`<div ref="mianscroll"> //中间内容 </div>`,其中`mianscroll`是名称,可以随意起。
2. 在点击事件中使用`scrollTo`方法将滚动条滚动到底部,例如:
```
bottomScrollClick() {
this.$nextTick(() => {
let scrollEl = this.$refs.mianscroll;
scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior: 'smooth' });
});
}
```
其中`bottomScrollClick`是点击事件的名称,`scrollEl`是指向滚动条所属的div的引用,`scrollHeight`是滚动条的高度,`behavior: 'smooth'`是滚动条滚动的动画效果。
阅读全文