6

我无法解决这个问题：我有一个 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 显示设置为“块”开始，滚动工作，但内容显示为碎片。

有任何想法吗？谢谢！

4

1 回答 1

1

将 .mask css 更改为自动高度，并使用可在 y 轴上拖动的 jQueryUI 使其可拖动。#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
    }
);
于 2012-11-30T00:35:19.413 回答