Bootstrap modal 使用鼠标滚动/触摸板在 Chrome 41 上停止滚动（但适用于向上/向下键）

Posted 2023-03-06

【中文标题】Bootstrap modal 使用鼠标滚动/触摸板在 Chrome 41 上停止滚动（但适用于向上/向下键）

【英文标题】：Bootstrap modal stop scrolling on Chrome 41 with mouse scroll/touchpad (but works with up/down keys)

【发布时间】：2015-06-15 09:59:50

【问题描述】：

我的目标是获得一个比我的屏幕高的可滚动引导模式。

问题： 在 Yosemite OS 上运行的 Chrome 41（但不是 40）上，如果内容高度高于屏幕，我的引导模式将在弹出后停止滚动。

我尝试过的是： - Straight Bootstrap(v.3.3.1) 自动将 '.modal-open' 添加到具有 'overflow: hidden;' 属性的 body 标记中。这会导致模态框可滚动。 - 我调整了寡妇大小，只需移动一个像素，模态就可以再次滚动。 - 我尝试过应用溢出：可见；等到body标签和模态本身，但没有运气。

有人知道这是什么问题吗？它是优胜美地引入的 Chrome 41 的错误吗？我目前使用的是 Bootstrap 3.3.1。

更新使用向上/向下箭头键滚动可以正常工作，但不能使用鼠标/触摸板滚动。

【问题讨论】：

我怀疑它与操作系统有关。 Chrome 40 和 41 解释 CSS 的方式可能略有不同。你能发布你的代码吗？

@snowYetis 当内容高于屏幕时，每次在引导模式下都会发生。我的代码只是按钮单击事件上的简单 $('#selector').modal('show') 。它只发生在 Chrome 41 上。

检查引导模式样式。查看是否包含溢出：隐藏

模态本身有一个 overflow-x: hidden 和 overflow-y: auto 属性，这是有道理的。我什至尝试过溢出-y：可见和滚动。如果我在 chrome 检查器中再次应用它，它将再次工作。但是，如果我将其应用到完整的 css 文件中，它将无法工作。它没有被其他样式破坏（我检查过）。

是的，这很奇怪。尝试将 z-index 添加到包含溢出属性的样式属性。这是在黑暗中拍摄的，但可能滚动条被另一块覆盖了。

【参考方案1】：

我遇到了同样的问题。经过快速搜索，我发现有人已经在their GitHub 上报告了此问题，并且大约六天前提出了实际修复，但尚未被接受，这意味着它现在没有任何稳定版本。

您可以轻松地在您的 CSS 中应用建议的修复：

.modal.in 
    -webkit-transform: translateZ(0);
            transform: translateZ(0);

【讨论】：

这在 Windows 上也适用于我 - chrome 44.0.2403。看起来这是 Chrome 的一个已知问题，由于 translateZ 的其他问题，引导开发人员无法修复：github.com/twbs/bootstrap/issues/16297

解决了 chrome 中 Angual-UI (angular-ui.github.io/bootstrap) modal 的滚动问题。 Firefox 工作正常。

最佳解决方案谢谢

【参考方案2】：

我也有这个问题。 Win7 Chrome 41 和 42beta & Linux Chrome 41。 我的临时解决方案：将视口高度 + 1px 设置为按 js 分页，以使滚动条每次都处于活动状态。

【讨论】：

啊，我明白了。很高兴知道这不仅仅发生在我身上。惊人的！我的临时解决方案是将模态内的内容包装在 div 中并设置溢出-y：滚动，使其在模态内可滚动。