无法在 Bootstrap 模式内的可滚动区域内滚动

Posted 2023-02-24

【中文标题】无法在 Bootstrap 模式内的可滚动区域内滚动

【英文标题】：Can't scroll within scrollable area inside a Bootstrap modal

【发布时间】：2017-01-05 12:46:26

【问题描述】：

我有一个引导模式，它在模式内有一个可滚动区域。如果我在可滚动区域内滚动，它会完美滚动。如果我滚动到可滚动区域之外，什么也不会发生，这是正确的。

问题是，如果我滚动到可滚动区域之外，然后快速回到可滚动区域，可滚动区域不会滚动。 在此处观看视频：www.youtube.com/watch?v=S9kiPTnt4e0

在这里的另一个视频中：www.youtube.com/watch?v=epansufGEuY 我在网络检查器中选择了模态后面的 .modal-backdrop div，并在模态的可滚动区域之外滚动，你可以看到 .modal-backdrop 仍然滚动，但不是肉眼。当我选择 body 时也会发生同样的事情 - body 元素的行为方式相同。

我认为这是导致问题的原因，因为一旦动量滚动停止，用户就可以再次在模态框内的可滚动区域中滚动，但是如果您随后快速向外滚动然后向内滚动，它仍然认为您正在滚动.modal-背景。

是否有人对如何解决此问题有任何建议。我有 position:fixed 和 overflow:hidden 在身体上，它解决了“滚动模态时背景滚动”的问题，但这个问题是不同的，让我很难过。

【问题讨论】：

可能是因为在模态框外滚动/点击会使其失去焦点状态，请尝试在滚出模态框后再次点击它，看看是否会使模态框再次可滚动。无论哪种方式，如果您共享模态代码，那将是最好的。

【参考方案1】：

试试这个

.modal-content 
  overflow-x: scroll;
  overflow-y: auto;

【参考方案2】：

原来这是 Bootstrap 中的一个错误，并且已在最新的 Bootstrap 4 Alpha 5 版本中修复。