当前位置：首页 > article >正文

前端 Overflow hidden与auto切换时页面右移的问题解决 Antd Drawer打开关闭时位置偏移的问题的解决

article 2025/4/2 18:00:20

一、Overflow hidden与auto切换时页面右移的问题解决

二、Antd Drawer打开关闭时位置偏移的问题的解决

一、Overflow hidden与auto切换时页面右移的问题解决

在通过js切换页面全局滚动条状态时，我发现页面随着滚动条的消失与重现发生了位置变化。

最初切换的逻辑代码如下：

    if (condition) {
            document.body.style.overflow = "hidden"
        } else {
            document.body.style.overflow = "unset"
        }

解决方案：

     if (condition) {
            let scrollWidth: number = window.innerWidth - document.documentElement.clientWidth
            document.body.style.overflow = "hidden"
            document.body.style.width = `calc(100% - ${scrollWidth}px)`
        } else {
            document.body.style.overflow = "unset"
            document.body.style.width = "100%"
        }

这里我们获取到页面全局的滚动条宽度，再将页面宽度设置成一个定值，在条件切换的状态下，页面就不会发生位置变化了。

二、Antd Drawer打开关闭时位置偏移的问题的解决

一的解决方案也是二的解决方案，通过查看Antd Drawer打开时的body样式，我们可以发现，body在Antd Drawer打开时被Antd设置了样式，即“width: calc(100% - 滚动条宽度)”，这就是发生偏移的问题所在，我们只需要确保打开时body的宽度是我们预期的宽度即可解决该问题。

亲测有效！

查看全文

http://www.kler.cn/a/613920.html