项目中有个需求,数据变动时,滚动条自动滚到顶部,组件用得是element-ui中的el-drawer,添加ref: ref="detailDrawer"
<el-drawer
ref="detailDrawer"
:withHeader="false"
:modal="false"
:modal-append-to-body="true"
:visible.sync="dialogVisible"
:show-close="false"
:wrapperClosable="true"
custom-class="drawer_class order_detail_template"
size="1200px"
></el-drawer>
在监听数据调接口时触发一下置顶方法:this.backTop();
// 置顶
backTop() {
let scrollTop =
this.$refs.detailDrawer.$refs.drawer.pageYOffset ||
this.$refs.detailDrawer.$refs.drawer.scrollTop ||
this.$refs.detailDrawer.$refs.drawer.offsetHeight;
let scrollNum = scrollTop / 6;
if (scrollTop > 0) {
this.timer = setInterval(() => {
scrollTop -= scrollNum;
this.$refs.detailDrawer.$refs.drawer.scrollTop = scrollTop;
if (scrollTop <= 0) {
clearInterval(this.timer);
}
}, 5);
} else {
clearInterval(this.timer);
}
},