【问题标题】:Can't scroll within scrollable area inside a Bootstrap modal无法在 Bootstrap 模式内的可滚动区域内滚动
【发布时间】: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 在身体上,它解决了“滚动模态时背景滚动”的问题,但这个问题是不同的,让我很难过。

【问题讨论】:

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

标签: twitter-bootstrap scroll modal-dialog


【解决方案1】:

试试这个

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

【讨论】:

    【解决方案2】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-07-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-01-04
      相关资源
      最近更新 更多