溢出-y 在模式内的 safari 中不起作用答案

【问题标题】：overflow-y not working in safari inside a modal溢出-y 在模式内的 safari 中不起作用
【发布时间】：2016-05-29 21:31:06
【问题描述】：

好的，这里是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 的内容是不可能的......

【问题讨论】：

您可以使用两个嵌套的 div。外部有 'overflow: auto' ，内部有 'overflow: hidden' 设置宽度以停止水平滚动条
@Bug 你能扩展一下吗。我不明白如何实现...
我在下面的回答中对此进行了扩展
您的列表在我的 iPhone6 上无法滚动，正如我在下面的回答中所做的那样，因此您可能在某个需要删除的地方设置了 css 规则，例如......在您的 filterOptionsContainer 类中，行：'溢出：隐藏;'不需要在那里。
你看过这个页面了吗：Safari Scrollbars也许它可以帮助你

标签： javascript html ios css

【解决方案1】：

尝试应用这个 inline ，或者通过 Jquery 脚本

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

或通过 Jquery 脚本

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

【讨论】：

使用 JS 添加样式有效，但直接通过 CSS 无效。另外，我的是模态的，所以当模态显示/隐藏时我设置/取消设置样式。
可能还值得注意的是，调整窗口大小可以使滚动工作（即使使用overflow: auto，但以编程方式调度调整大小事件也无济于事

【解决方案2】：

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

试试这个：

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

【讨论】：

抱歉延迟回复。这没有帮助，仍然没有滚动条。
遇到同样的问题。尝试将溢出-y 用作“滚动”和“自动”，尝试将-webkit-overflow-scrolling 用作触摸。不工作。

【解决方案3】：

你可以试试这个。它在 Safari 上运行良好。

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

【讨论】：

-webkit-overflow-scrolling: touch;这一个使 iphone safari 中的滚动顺畅。

【解决方案4】：

如果所有解决方案都不起作用，您可以尝试 flex: 1 1;这具有跨浏览器支持。

【讨论】：

我的父容器是一个 Flex 元素，所以将此解决方案应用于我的 Flex 子元素完全解决了我的问题。谢谢！！

【解决方案5】：

您可以在自动溢出后设置overflow-y:hidden;，并且在 safari 上至少会应用该规则。 Ref.

【讨论】：

如果您要复制某人的答案，您确实应该参考该答案，而不是将其描绘成您自己的答案。
可能，但添加对它的引用。链接它。

【解决方案6】：

使用两个嵌套 div 仅显示垂直滚动条的代码。

<!DOCTYPE html>
<html>
<body>
<div class="div1">     
    <div class="div2">     
111111<br>
222222222222222222222<br>
3333333333333333333333333333333333<br>
44444444<br>
55555555555555555555555555555<br>
6666666666666666666666666666<br>
77777777777<br>
88888888888888888888888888<br>
99999999999999999999999<br>
0000000000000000000000000000000<br>
aaaaaaaaaaaaaaaaaa<br>
bbbb<br>
cccccccccccccccc<br>
    </div>
</div>
</body>
</html>
<style>

.div1{
    overflow:auto;
    width:100px;
    height:100px;
}
.div2{
    overflow:hidden;
    width:100%;
}
</style>

【讨论】：

感谢您的回答。它确实会产生一个可滚动的 div，但不是在 Safari 上。
在我的 iPhone6 和 safari 上测试成功，抱歉
我编辑了带有损坏滚动链接的 OP。非常感谢您的意见。我真的需要解决这个问题。
我无法让移动版本在我的服务器上运行，但是请尝试在 #filterOptionsContainer 类 'overflow:hidden;' 的 viewer-min.css 文件中删除此行这将停止滚动，可能是您的问题

【解决方案7】：

你可以试试这个，对我来说很好用

#filterOptionsContainer {
    overflow: auto; 
    overflow-y: auto; 
    overflow-x: hidden; 
}

【讨论】：

这不是 safari 的充分解决方案。
嗨 dewwwald，这对我来说是很好的反馈，但您能与我们分享更多关于解决方案的信息吗？

【解决方案8】：

检查您的 Safari 浏览器版本。并符合以下标准：

在 Safari 3.0 及更高版本中可用。
适用于 iOS 1.0 及更高版本。

如果您不符合条件，请采取以下措施：

应用 ClearFix

.clearfix:after {visibility: hidden;}

原因：设置溢出不会清除元素处的浮动

或

在根/主体级别设置元素相对位置，如下所示：

body { position:relative; overflow-x:hidden; }

注意：只应用其中一个。

感谢和欢呼

【讨论】：

【解决方案9】：

对于未来的读者，使用 display: flex 的 safari 无法使用溢出功能你必须使用display: block

【讨论】：

【解决方案10】：

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

编辑：我终于想通了。基本上发生的事情是，在我切换到使用多选后，在使用 Safari 时，它在 IOS 设备中的行为也很奇怪。

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

关键是“dojo/touch”和 IOS Safari 完全不兼容。

【讨论】：