Bootstrap 响应式表格不在 iOS 设备上垂直滚动答案

【问题标题】：Bootstrap responsive table not scrolling vertically on iOS devicesBootstrap 响应式表格不在 iOS 设备上垂直滚动
【发布时间】：2014-03-09 12:19:43
【问题描述】：

这就是我所拥有的：

<div class="table-responsive">
    <table class="table" style="background: transparent">
        ....
    </table>
</div>

我正在使用以下 bootstrap.css 文件：http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css

当我尝试在 iOS 设备上上下滚动时（当我的手指触摸桌面时），它不会滚动。它只是上下拖动整个页面。我必须触摸身体背景或除表格以外的任何其他对象才能滚动。这个问题不会出现在 Android 设备上，但它似乎出现在 iOS 设备上，比如 iPhone。

我尝试将overflow-y: auto 添加到<div class="table-responsive">，但还是不行。

为了在移动设备（特别是 Apple 设备）上启用滚动，我需要添加什么？

【问题讨论】：

标签： html ios css twitter-bootstrap

【解决方案1】：

对于遇到此问题的其他人，我所要做的就是在表格响应类的 css 中添加以下行：

-webkit-overflow-scrolling: touch;

现在它按预期工作了。

【讨论】：

这确实有效...但是我必须将此 css 应用于显然导致问题的父 div...我不知道是什么导致了这个错误...我开始查看父 div ......因为当它试图向下滚动页面时......我注意到一些 div 会正确地保持在原位......而其他 div 会在滚动过程中被我的手指拉下
github.com/twbs/bootstrap/issues/16184 - 不要指望这会在引导程序 v3 中随时修复。
我的主浏览器滚动无法在应用此属性时显示无效的属性值

【解决方案2】：

我遇到了同样的问题，然后我从 html 和正文中删除了 overflow: hidden;。 IOS 上 Safari 的行为与 Android 上 Chrome 的行为相匹配，即页面再次垂直滚动。检查并查看 .table-responsive 的父级是否有 overflow-hidden 并尝试将其注释掉。

我仍在寻找一种不会强迫我更改父元素的 CSS 的更好的解决方案。

[编辑]

找到了。您不需要更改 .table-responsive 父级的溢出值，只需确保添加

parent {
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
}

【讨论】：

【解决方案3】：

这只会使表格水平滚动。垂直滚动表格不是 Twitter Bootstrap 的一部分。

查看他们的文档以获取更多信息：CSS 选项卡下的响应表

来源： http://getbootstrap.com/css/#tables

【讨论】：