css实用技巧——锁定页面，禁止滚动 vs 解锁页面，恢复滚动

使用场景

1. 弹出弹窗时，隐藏右侧滚动条，并锁定页面，禁止弹窗下的页面滚动

2. 网页较长时，用户可以临时锁定当前浏览的位置，避免页面意外滚动到其他位置

核心代码

锁定页面，禁止滚动（实现原理：用overflow  'hidden' 消除滚动条，并用等宽的透明右边框填充，避免页面可用宽度变化，引起布局改变）

lockScroll() {
    let widthBar = 17, root = document.documentElement;
    if (typeof window.innerWidth == 'number') {
        widthBar = window.innerWidth - root.clientWidth;
    }
    root.style.overflow = 'hidden';
    root.style.borderRight = widthBar + 'px solid transparent';
},

解锁页面，恢复滚动

unlockScroll() {
    let root = document.documentElement;
    root.style.overflow = '';
    root.style.borderRight = '';
}

完整范例代码

<template>
    <div style="height: 3000px">
        <div class="operationPanel">
            <button @click="lockScroll">锁定页面，禁止滚动</button>
            <button @click="unlockScroll">解锁页面，恢复滚动</button>
        </div>
    </div>
</template>
<script>
    export default {
        methods: {
            lockScroll() {
                let widthBar = 17, root = document.documentElement;
                if (typeof window.innerWidth == 'number') {
                    widthBar = window.innerWidth - root.clientWidth;
                }
                root.style.overflow = 'hidden';
                root.style.borderRight = widthBar + 'px solid transparent';
            },
            unlockScroll() {
                let root = document.documentElement;
                root.style.overflow = '';
                root.style.borderRight = '';
            }
        },
    }
</script>
<style scoped>
    .operationPanel {
        position: fixed;
        left: 10px;
        top: 10px
    }
</style>