自定义指令--【v-lockScroll】用来锁定滚动条

喝西瓜汁的兔叽Yan2025-03-29 11:07

背景

最近在开发业务上，遇到了自己封装的modal组件，组件弹出的时候，会覆盖到页面最上层。但是覆盖出现了，而页面底层的滚动条还可以滑动，这样对用户就不是很友好了。如下效果：

解决方案

于是，思考过后，发现我们自己封装一个自定义指令,在组件展示的时候将滚动条给锁定+隐藏，问题就解决了。

思路

当我们使用v-lockscroll="true"时,在指令mounted时计算出滚动条的宽度

滚动条的宽度=浏览器窗口宽度 - 文档内部宽度.
body设置overflow为hidden
重新设置body宽度和浏览器窗口宽度一致。
unmounted时候将body的overflow和宽度复原到最初。

具体的实现如下：

vue 复制代码

<template>
    <!-- 使用自定义指令 -->
    <div v-lockscroll>
        //....其余DOM元素
    </div>
</template>


<script setup>
//自定义指令锁定滚动条
const VLockscroll = {
    mounted(_el, binding) {
        if (binding.value) {
            const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth
            document.body.style.overflow = 'hidden'
            document.body.style.width = `calc(100% - ${scrollBarWidth}px)`
            // console.log('scrollBarWidth', scrollBarWidth);
            // document.body.style.paddingRight = `${scrollBarWidth}px`
        }
    },
    unmounted() {
        document.body.style.overflow = ''
        document.body.style.width = ''
    }
}
</script>

效果

这个时候当我们再次打开组件时候，页面的滚动条就被禁用了。

朋友，我是喝西瓜汁的兔叽，感谢您的阅读，衷心祝福您和家人身体健康，事事顺心。