Bootstrap 5中data-bs-overflow属性的添加机制与行为咨询

这个属性属于Bootstrap内部用于状态管理的标记，官方文档确实没有单独列出来说明，下面直接讲它的逻辑：

什么时候会被添加？ #

• 当你打开Modal或者Offcanvas组件时，Bootstrap会自动给<body>加上这个属性：
  • 如果打开组件前，body的overflow是默认的可见状态（没被设为hidden），属性值就是visible
  • 如果打开前body已经是overflow: hidden，属性值就设为hidden

它的实际作用是什么？ #

这就是个“状态快照”标记——Bootstrap用它记住body在组件打开前的overflow状态，等组件关闭的时候，会根据这个属性的值把body的overflow恢复成原来的样子。这样就不会一刀切地恢复成visible，适配那些页面本身就需要隐藏滚动条的场景。

为什么会和你的代码冲突？ #

你遇到的难复现异常，大概率是因为：

• 你的自定义代码直接改了body的overflow样式，但没同步更新data-bs-overflow的值。等Bootstrap关闭组件时，还是按照这个标记的旧值恢复，就会导致样式混乱
• 或者在组件打开/关闭的过程中，你的代码和Bootstrap的状态逻辑撞车了——比如Bootstrap刚把body设为hidden并标记data-bs-overflow="visible"，你的代码立刻又改了overflow，等到组件关闭时，Bootstrap还是按标记恢复，结果就出问题了

怎么解决这个问题？ #

• 如果必须手动修改body的overflow，改完之后记得同步更新data-bs-overflow的属性值，让它和实际的overflow状态保持一致
• 尽量避开组件打开/关闭的过渡阶段修改overflow——可以监听shown.bs.modal（Modal完全打开后）或者hidden.bs.modal（Modal完全关闭后）这类事件，等状态稳定了再执行自定义逻辑

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