javascript iPad、iPhone 模态对话框滚动问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30646490/
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
iPad, iPhone modal dialog scrolling issue
提问by Chris
Various pages on our website open up JQuery 'Modal Dialog' boxes.
我们网站上的各个页面都打开了 JQuery 的“模态对话框”框。
These work fine in every web browser.
这些在每个 Web 浏览器中都可以正常工作。
However a problem occurs when viewing on an iPad or iPhone, and i believe this is a common issue.
但是，在 iPad 或 iPhone 上查看时会出现问题，我认为这是一个常见问题。
On some pages the modal dialog box is too big for the iPad screen, therefore i need to scroll the modal box.
在某些页面上，模式对话框对于 iPad 屏幕来说太大了，因此我需要滚动模式框。
However when I do this dialog box doesnt move, but the background (i.e. the main screen behind it) scrolls.
但是，当我执行此对话框时，该对话框不会移动，但背景（即其背后的主屏幕）会滚动。
I want to disable the background from scrolling when the modal is open but enable the modal dialog to scroll.
我想在模态打开时禁用背景滚动但启用模态对话框滚动。
I have tried 'position:fixed' underneath the 'overflow:hidden' which has solved the issue for others, unfortunately for me, the issue still exists.
我已经尝试过在“溢出：隐藏”下的“位置：固定”已经为其他人解决了这个问题，不幸的是，对我来说，这个问题仍然存在。
Does anyone have any other ideas/things that I can try?
有没有人有我可以尝试的其他想法/事情？
Below is an example of the code for one of the pages that opens in a modal dialog box.
下面是在模式对话框中打开的其中一个页面的代码示例。
Thanks
谢谢
<script>
function myOnLoad() {
window.parent.$('body').css('overflow', 'hidden');
}
</script>
<body onload="myOnLoad()">
<div class="wrapper">
<div id="popup" class="modalDialog2">
<!--DIALOG CONTENT HERE-->
</div>
</div>
<script type="text/javascript">
// close Modal
$("#close").click(function (e) {
e.preventDefault();
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src');
window.parent.$(".modalDialog").removeClass('show');
});
</script>
采纳答案by Chris
SOLUTION
解决方案
This snippet of code and corresponding linkdid the trick...
这段代码和相应的链接起到了作用......
$(function(){
if (/iPhone|iPod|iPad/.test(navigator.userAgent))
$('iframe').wrap(function(){
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'scroll',
'-webkit-overflow-scrolling': 'touch'
});
});
})
回答by Manoj Gorasya
I had the issue, lines of code below resolved it for me -
我遇到了问题，下面的代码行为我解决了-
html{
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
