fix(utils): 优化 scrollLockMixin 以恢复原始滚动设置

- 在 disableBodyScroll 方法中保存原始的 body overflow 样式
- 修改 enableBodyScroll 方法以恢复原始样式,而不是固定设置为 'auto'
- 优化了组件销毁前的清理逻辑,确保滚动功能始终正确恢复
This commit is contained in:
jmal 2025-08-05 17:14:31 +08:00
parent 6bcd850bca
commit 3cf9adfd49

View File

@ -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();
} },
}; };