适用若依框架,适用Vue
在A页面时滚动到某位置,切到B页面,再切回A页面时保留滚动的位置。
原理:切出A页面时记录下高度,切回A页面时恢复高度。
// 切出页面时会调用
beforeRouteLeave(to, from, next) {
// data里记一下scroll变量,scroll:0
this.scroll = window.scrollY; // 切出去时记录下高度
next();
},
// 切回页面时会调用
activated() {
this.$nextTick(() => {
setTimeout(() => {
window.scrollTo({
top: this.scroll, // 切回来时恢复高度
// behavior: 'smooth' 可选,滑动恢复,增加动画效果
});
}, 0);
});
},
如果不是整个页面滚动而是某个Div里滚动的话,就这么写:
beforeRouteLeave(to, from, next) {
// data里记一下scroll变量,scroll:0
this.scroll = document.getElementsByClassName("chat-content")[0].scrollTop; // Div的class名称
next();
},
activated() {
this.$nextTick(() => {
setTimeout(() => {
document.getElementsByClassName("chat-content")[0].scrollTop = this.scroll;
}, 0);
});
},