iPad、iPhone模态对话框滚动问题

Question

iPad、iPhone模态对话框滚动问题

javascriptjqueryhtmlios

8

我们网站的各个页面都可以打开jQuery“模态对话框”。

它们可以在所有的浏览器中正常工作。

然而，在iPad或iPhone上查看时，出现了一个问题，我认为这是一个常见的问题。

在某些页面上，模态对话框太大，无法适应iPad屏幕，所以我需要滚动模态对话框。

但当我这样做时，对话框并不会移动，而是背景（即主屏幕）会滚动。

我希望在模态打开时禁用背景滚动，同时允许模态对话框滚动。

我已经尝试在“overflow:hidden”下方使用“position:fixed”来解决此问题，但对我来说，问题仍然存在。

是否有任何其他想法/可以尝试的事情？

以下是打开模态对话框的一个页面的代码示例。

谢谢。

<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>

- Chris

请在 http://codepen.io 上添加可工作的代码片段。 - sergdenisov

没问题，我已经找到了解决我的问题的答案。 - Chris

1

那么你应该发布自己的答案或者删除它。 - sergdenisov

这段代码和相关链接解决了问题...https://forum.jquery.com/topic/problem-with-dialog-scroll-on-ipad - Chris

可能是如何在移动浏览器上打开Bootstrap 3模态框时防止背景滚动？的重复问题。 - Mugur 'Bud' Chirica

2个回答

1

解决方案

这段代码和相应的链接解决了问题...

$(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'
            });
        });
})

- Chris

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Manoj Gorasya · Accepted Answer

我曾经遇到过这个问题，以下代码解决了我的问题 -

html{ 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch;
}