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，并使用y轴上的jQueryUI draggable使其可拖动。 #popup div隐藏溢出，在这种情况下是“真正的”掩码。因此，您可以向上/向下移动当前.mask 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
    }
);

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

1 个答案: