- 在 disableBodyScroll 方法中保存原始的 body overflow 样式 - 修改 enableBodyScroll 方法以恢复原始样式,而不是固定设置为 'auto' - 优化了组件销毁前的清理逻辑,确保滚动功能始终正确恢复
23 lines
591 B
JavaScript
23 lines
591 B
JavaScript
export const scrollLockMixin = {
|
||
data() {
|
||
return {
|
||
originalBodyOverflow: '',
|
||
};
|
||
},
|
||
methods: {
|
||
// 鼠标进入滚动区域时,禁止body滚动
|
||
disableBodyScroll() {
|
||
this.originalBodyOverflow = document.body.style.overflow;
|
||
document.body.style.overflow = 'hidden';
|
||
},
|
||
// 鼠标离开时,恢复body滚动
|
||
enableBodyScroll() {
|
||
document.body.style.overflow = this.originalBodyOverflow;
|
||
},
|
||
},
|
||
// 关键:在组件销毁前,确保恢复body滚动,防止页面卡死
|
||
beforeDestroy() {
|
||
this.enableBodyScroll();
|
||
},
|
||
};
|