更新 - 作者固定问题

显然杰克今天（2013年2月4日）已经fixed发行了这个问题。值得从他的Github页面获取最新版本。

以前的解决方案

好的，我无法让jScrollPane正常工作。这并不是说你不会，但我也使用自定义大小调整来调整iframe的大小，我认为它不能很好地与jScrollPane的尺寸计算相匹配。

解决方案

然而，由于Sharon here on stackoverflow感谢更加通用的iOS iframe滚动问题的解决方案，我确实设法让它工作。我对她的代码进行了一些调整，以便在彩盒中发挥更好的效果。 请注意，这仅适用于控制iframe内容的位置

只需将以下代码放入iframe：

setTimeout(function () {
    var startY = 0;
    var startX = 0;
    var b = document.body;
    b.addEventListener('touchstart', function (event) {
        startY = event.targetTouches[0].screenY;
        startX = event.targetTouches[0].screenX;
    });
    b.addEventListener('touchmove', function (event) {
        event.preventDefault();
        var posy = event.targetTouches[0].screenY;
        var h = parent.document.getElementById("cboxLoadedContent");
        var sty = h.scrollTop;

        var posx = event.targetTouches[0].screenX;
        var stx = h.scrollLeft;
        h.scrollTop = sty - (posy - startY);
        h.scrollLeft = stx - (posx - startX);
        startY = posy;
        startX = posx;
    });
}, 1000);

滚动并不紧张，虽然您没有逐渐减慢原生滚动速度，但只要您抬起手指就会停止。另外，没有滚动条。除此之外，它是一个完美的解决方案。

page with Sharon's solution提供了另一种方法，可以尝试不控制iframe的情况。

Answer 2

我刚刚完成了这项工作，在我的通用CSS中我添加了#cboxLoadedContent{-webkit-overflow-scrolling: touch;}

然后，在我的colorbox打开的视图中，我已经在css中添加了以下样式body{-webkit-transform:translate3d(0, 0, 0);}

适用于iPad和iPhone。

Answer 3

您是否掌控自己的iframe内容，或者它是来自外部网站的内容，即位于不同的域名？如果是后者，我无法帮助。

如果您掌控iframe内容，可以使用jScrollPane plugin解决问题。

iframe的正文应该有CSS overflow：auto，你需要在iframe内容中包含一个div。在iframe内部准备好获取iframe窗口的高度时，将包装器div的css高度设置为窗口的高度（或者稍微减少一点），然后将jScrollPane应用于包装器div。

$(document).ready(function() {
    var $container = $("#myDiv");
    var $win = $(window);

    if ($container.height() >= $win.height()){
        $container.css({
            'width': $win.width(),
            'height': $win.height()
        });

        $container.jScrollPane();
    }
});

jQuery Colorbox，iframe内容不在iPad中滚动

3 个答案:

更新 - 作者固定问题

以前的解决方案

解决方案