React项目中Bootstrap模态框阻止页面滚动的CSS类查询

问题描述 #

在React移动端项目中，需要实现全屏模态框并阻止下方内容滚动。此前通过useEffect给body设置overflow-y: hidden，现在希望采用类似Bootstrap的方案，想了解示例代码中哪个Bootstrap类实现了阻止滚动的效果。

答案 #

Bootstrap实现阻止页面滚动的核心是**modal-open类**——这个类不会直接出现在你提供的HTML结构里，当通过按钮触发模态框时，Bootstrap的JavaScript会自动给<body>标签添加该类，关闭模态框时再移除它。

对应的核心CSS规则为：

body.modal-open {
  overflow: hidden;
}

这条规则直接限制了body的滚动行为，从而实现模态框打开时背景内容无法滚动的效果。

内容的提问来源于stack exchange，提问作者Fuaad