Vue，Modal使页面能够滑动

Question

在ant-design中Modal出现时，控制台会自动给body加上overflow：hidden，但是希望整个页面能够上下滑动，

Answer 1

让 “紫雾凌寒” 来帮你回答,本回答结合 DeepSeek

如果还有问题，请评论或点击头像私信，如果有帮助到您, 请关注、采纳、点赞

1. 关键点分析：
   - Ant Design的Modal组件出现时会给body添加overflow: hidden，这导致页面无法滑动。需要找到一种方法来禁用这个默认行为，或者在Modal出现时动态调整body的样式以允许滚动。
2. 解决方案：
   - 方法一：在Modal显示前移除body的overflow:hidden样式
   • 可以通过在Modal的visible变化时监听并处理。
   • 示例代码如下：

<template>
  <div>
    <a-button @click="showModal = true">Open Modal</a-button>
    <a-modal :visible="showModal" title="Basic Modal">
      <p>Some content...</p>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  },
  watch: {
    showModal(newValue) {
      if (newValue) {
        document.body.style.overflow = 'auto';
      } else {
        document.body.style.overflow = 'hidden';
      }
    }
  }
};
</script>

• 方法二：使用CSS变量来控制Modal出现时的滚动
  • 首先定义一个CSS变量来控制滚动，例如--body-overflow。
  • 在Modal显示时将--body-overflow设置为auto，在Modal隐藏时设置为hidden。
  • HTML部分：

<template>
  <div>
    <a-button @click="showModal = true">Open Modal</a-button>
    <a-modal :visible="showModal" title="Basic Modal">
      <p>Some content...</p>
    </a-modal>
  </div>
</template>

 - CSS部分：

body {
  --body-overflow: hidden;
  overflow: var(--body-overflow);
}

 - JavaScript部分：

export default {
  data() {
    return {
      showModal: false
    };
  },
  watch: {
    showModal(newValue) {
      if (newValue) {
        document.documentElement.style.setProperty('--body-overflow', 'auto');
      } else {
        document.documentElement.style.setProperty('--body-overflow', 'hidden');
      }
    }
  }
};

1. 方案优缺点：
   - 方法一：
   • 优点：简单直接，通过直接操作DOM样式来实现需求，容易理解和维护。
   • 缺点：依赖于JavaScript对样式的动态修改，在一些复杂场景下可能会出现样式闪烁等问题。
   • 方法二：
   • 优点：使用CSS变量来管理样式，分离了样式控制和业务逻辑，代码结构更清晰，并且可以利用浏览器的CSS解析机制，性能相对较好。
   • 缺点：需要对CSS变量有一定的了解，并且不同浏览器对CSS变量的支持情况需要考虑。
2. 总结：
   - 解决Ant Design Modal出现时页面无法滑动的问题，可以通过在Modal显示和隐藏时动态调整body的overflow样式来实现。上述两种方法都能达到目的，方法二在代码结构和性能上相对更优，但如果项目对CSS变量支持有顾虑，方法一也是可行的选择。

希望以上解答对您有所帮助。如果您有任何疑问，欢迎在评论区提出。