溢出-y不在模态内的safari中工作

Question

好的,这里是html:

<div style="height: 200px; position: relative;"  id="filterOptionsContainer">
                <table id="filterOptionsTable" class="table table-striped table-hover">
                </table>
            </div>

基本上,我动态地向表添加行,我希望容器滚动溢出.首先,我尝试了明显的:

#filterOptionsContainer {
overflow-y: auto;
}

除了ios移动设备上的Safari之外,其他地方都可以正常工作.

从那时起,我花了几个小时尝试我能想到和阅读的每种风格组合,但我无法获得标准的溢出滚动.我得到的最接近的是滚动条显示(它实际上并没有滚动).

所有帮助表示赞赏.我很难相信在Safari中无法在模态中滚动div的内容...

编辑:仍在这个问题上.我需要解决它.

Answer 1

尝试应用此内联,或通过Jquery脚本

 style="overflow-y: scroll; -webkit-overflow-scrolling: touch;"

或者通过Jquery脚本

$("#filterOptionsContainer").css({
    "overflow-y": "scroll",
    "-webkit-overflow-scrolling": "touch"
});

Answer 2

我没有任何IOS产品可以验证这一点，但似乎overflow: auto是一个已知的Safari错误。

尝试这个：

#filterOptionsContainer {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Answer 3

我通过在移动设备上切换到多选（并隐藏可滚动 div）解决了这个问题（所以没有真正的解决方案）。谢谢各位的帮助。

编辑：我终于弄清楚了。基本上发生的事情是，在我切换到使用多选后，在使用 Safari 时，它在 IOS 设备中也表现得很奇怪。

在进一步检查中，我的一位同事注意到可滚动 div 和多选上的 dojo 触摸事件（我使用的模板使用 dojo）。我开始查看模板的源代码，以找出为什么这些事件被附加到所有这些元素，我注意到一个名为“dojo/touch”的 dojo 模块。从项目中删除此模块后，这些元素在 Safari 中工作正常。

要点是“dojo/touch”和 IOS Safari 完全不兼容。