fix(utils): 优化 scrollLockMixin 以恢复原始滚动设置
- 在 disableBodyScroll 方法中保存原始的 body overflow 样式 - 修改 enableBodyScroll 方法以恢复原始样式,而不是固定设置为 'auto' - 优化了组件销毁前的清理逻辑,确保滚动功能始终正确恢复
This commit is contained in:
parent
6bcd850bca
commit
3cf9adfd49
@ -1,16 +1,22 @@
|
|||||||
export const scrollLockMixin = {
|
export const scrollLockMixin = {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
originalBodyOverflow: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 鼠标进入滚动区域时,禁止body滚动
|
// 鼠标进入滚动区域时,禁止body滚动
|
||||||
disableBodyScroll() {
|
disableBodyScroll() {
|
||||||
|
this.originalBodyOverflow = document.body.style.overflow;
|
||||||
document.body.style.overflow = 'hidden';
|
document.body.style.overflow = 'hidden';
|
||||||
},
|
},
|
||||||
// 鼠标离开时,恢复body滚动
|
// 鼠标离开时,恢复body滚动
|
||||||
enableBodyScroll() {
|
enableBodyScroll() {
|
||||||
document.body.style.overflow = 'auto'; // 或者 'visible'
|
document.body.style.overflow = this.originalBodyOverflow;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
// 关键:在组件销毁前,确保恢复body滚动,防止页面卡死
|
// 关键:在组件销毁前,确保恢复body滚动,防止页面卡死
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
this.enableBodyScroll();
|
this.enableBodyScroll();
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user