使用弹出窗口时,Ipad div内容不滚动

Question

我无法解决这个问题:我有一个div,我用jquery作为弹出窗口显示和隐藏.内容是facebook的评论插件.这是代码:

<div id="popup">
    <div class="mask">
        <div class="fb-comments" data-href="http://www.example.com" data-num-posts="30" data-width="470" data-colorscheme="light"></div>
    </div>
</div>

这是我到目前为止的CSS:

#popup {
position:absolute;
left:0px;
top:0px;
width:512px;
height:530px;
background:url(../img/bg_popup.gif) repeat-x 0px 0px;
display:none;
overflow:hidden;
z-index:110;
}

#popup .mask {
margin:5px 0px 0px 10px;
width:498px;
height:475px;
overflow-y: scroll;
overflow-x: hidden;
}

我使用jquery将弹出窗口放在屏幕中央,一切都适用于所有浏览器.弹出窗口出现,我可以滚动内容.

问题出在Ipad Safari上.div不会滚动,并且已经尝试使用webkit-overflow-scrolling:touch,但没有任何反应.

还有一件事:如果我从设置为"阻止"的弹出div显示开始,滚动工作,但内容显示为碎片.

有任何想法吗？谢谢!

Answer 1

将 .mask css 更改为 height auto 并使用 jQueryUI Draggable 在 y 轴上使其可拖动。#popup div 是溢出隐藏的，在这种情况下是“真正的”掩码。因此，您可以向上/向下移动当前 .mask div，但不能向左/向右移动。如果用户滚动到 #popup div 之外，您只需要一些数学来进行修正。因此，您需要监听停止事件。这仅适用于触摸屏。在桌面客户端上，您必须先通过单击来拖动 div（但只需一点代码即可处理此问题）。

为了更好地支持 jQueryUI 的触摸，添加jQuery UI Touch Punch

例子：

$('#popup .mask').draggable(
    axis:"y",
    stop:function(event, ui){
      // If there's any correction required you can do here
      // e.g. the overscroll like on iOS
    }
);