Javascript 溢出-y 不能在模式中的 safari 中工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35469227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overflow-y not working in safari inside a modal
提问by pQuestions123
Ok here is the html:
好的，这里是 html：
<div style="height: 200px; position: relative;" id="filterOptionsContainer">
<table id="filterOptionsTable" class="table table-striped table-hover">
</table>
</div>
Basically, I am dynamically adding rows to the table and I would like the container to scroll the overflow. First I tried the obvious:
基本上，我正在向表中动态添加行，并且我希望容器滚动溢出。首先，我尝试了显而易见的：
#filterOptionsContainer {
overflow-y: auto;
}
and that works fine everywhere except for Safari on ios mobile devices.
除了 ios 移动设备上的 Safari 之外，它在任何地方都可以正常工作。
Since then I have spent hours trying every combination of styles I can think of and read about but I cannot get standard overflow scrolling. The closest I got was getting the scrollbar to show (it wasn't actually scrolling though).
从那以后，我花了几个小时尝试我能想到和阅读的各种样式组合，但我无法获得标准的溢出滚动。我得到的最接近的是让滚动条显示（虽然它实际上并没有滚动）。
All help is appreciated. It is hard for me to believe that it is not possible to scroll the contents of a div in a modal in Safari...
感谢所有帮助。我很难相信在 Safari 的模态中滚动 div 的内容是不可能的......
采纳答案by pQuestions123
I resolved this by switching to a multiselect (and hiding the scrollable div) on mobile devices (so no real solution). Thanks for all the help everyone.
我通过在移动设备上切换到多选（并隐藏可滚动的 div）来解决这个问题（所以没有真正的解决方案）。谢谢各位的帮助。
Edit: I have finally figured this out. Basically what happened was that after I switched to using a multiselect, it too was acting weirdly in IOS devices when using Safari.
编辑：我终于想通了。基本上发生的事情是，在我切换到使用多选之后，在使用 Safari 时，它在 IOS 设备中也表现得很奇怪。
In examining further a colleague of mine noticed dojo touch events on both the scrollable div and on the multiselect (the template I am using uses dojo). I started looking around in the template's source to figure out why these events were being attached to all these elements and I noticed a dojo module called "dojo/touch". After removing this module from the project, the elements are working fine in Safari.
在进一步检查时，我的一位同事注意到可滚动 div 和多选（我使用的模板使用 dojo）上的 dojo 触摸事件。我开始环顾模板的源代码以找出为什么这些事件被附加到所有这些元素上，我注意到一个名为“dojo/touch”的 dojo 模块。从项目中删除此模块后，元素在 Safari 中工作正常。
The take away is that 'dojo/touch' and IOS Safari are totally incompatible.
结论是“dojo/touch”和IOS Safari 完全不兼容。
回答by Raja Mohammed
Try applying this inline , or through a Jquery Script
尝试应用此内联，或通过 Jquery 脚本
style="overflow-y: scroll; -webkit-overflow-scrolling: touch;"
or through a Jquery Script
或通过 Jquery 脚本
$("#filterOptionsContainer").css({
"overflow-y": "scroll",
"-webkit-overflow-scrolling": "touch"
});
回答by Chris
I don't have any IOS product to verify this, but it seems like overflow: autois a known Safari bug.
我没有任何 IOS 产品来验证这一点，但这似乎overflow: auto是一个已知的 Safari 错误。
Try this:
尝试这个：
#filterOptionsContainer {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
回答by Microsmsm
回答by Bug
Code for using two nested divs to show vertical scroll bar only.
使用两个嵌套 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>
回答by Binh LE
you can try this, it work fine for me
你可以试试这个，它对我来说很好用
#filterOptionsContainer {
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
}
回答by Amulya Kashyap
Check Your Version of Safari Browser. And match with criteria given below :
检查您的 Safari 浏览器版本。并符合以下给出的标准：
- Available in Safari 3.0 and later.
- Available in iOS 1.0 and later.
- 在 Safari 3.0 及更高版本中可用。
- 在 iOS 1.0 及更高版本中可用。
if you're against the conditions then get upto following measures:
如果您违反条件，请采取以下措施：
Apply ClearFix
.clearfix:after {visibility: hidden;}
应用 ClearFix
.clearfix:after {visibility: hidden;}
Reason: Setting overflow doesn't clear the float at the element
原因：设置溢出不会清除元素处的浮点数
OR
或者
Set Position of element relative at root/body level like this :
body { position:relative; overflow-x:hidden; }
在根/正文级别设置元素相对位置，如下所示：
body { position:relative; overflow-x:hidden; }
Note: Apply only one of them.
注意：只应用其中之一。
Thanks & cheers
感谢和欢呼
回答by Kristy Welsh
If none of the solutions work you could try flex: 1 1; This has cross-browser support.
如果所有解决方案都不起作用，您可以尝试 flex: 1 1; 这具有跨浏览器支持。
回答by Sonu Nagar
You can try this. It's working fine with Safari.
你可以试试这个。它在 Safari 中运行良好。
#filterOptionsContainer {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
