弹层禁止body跟随滚动

1,648 阅读1分钟

在元素上添加这两个事件即可

    let top = 0;
    
    // 鼠标进入目标元素时,存储当前的滚动条高度,并锁住body
    onmouseenter() {
        top = window.scrollY;

        document.body.style.position = 'fixed';
        document.body.style.top = -top + 'px';
        document.body.style.width = '100%';
        document.body.style.overflowX = 'scroll';
    },

    // 鼠标离开目标元素时,释放body锁,恢复滚动条高度
    onmouseleave() {
        document.body.style.position = '';
        document.body.style.top = '';
        document.body.style.width = '';
        document.body.style.overflowY = 'unset';

        window.scrollTo(0, top);
    },