Vue 让滚动条滚动到底部&顶部
2022-08-22 本文已影响0人
kurumi_feng
vue版本:2.6.14
ElementUI版本:^2.15.8
场景描述:开发业务中需要通过按钮点击使页面滚动到底部或者顶部。
解决方法:
- 在滚动条所属 DIV 上加上
ref="scrollDiv"
(scrollDiv名称随意)
<div ref="scrollDiv">
...
</div>
- 在点击事件中编写如下代码
// 滚动到顶部
handleScrollTop() {
this.$nextTick(() => {
let scrollElem = this.$refs.scrollDiv;
scrollElem.scrollTo({ top: 0, behavior: 'smooth' });
});
},
// 滚动到底部
handleScrollBottom() {
this.$nextTick(() => {
let scrollElem = this.$refs.scrollDiv;
scrollElem.scrollTo({ top: scrollElem .scrollHeight, behavior: 'smooth' });
});
}
注意点:一定要是给滚动条所属 DIV 添加如上方法,否则无法生效。我的父元素都是
overflow:hidden
,而滚动的 DIV 的样式是overflow:auto
,所以我能确定滚动的 DIV 是哪一个。