4

在 iPad 上查看时，Colorbox iframe 内容不会滚动，请阅读以下内容：

https://github.com/jackmoore/colorbox/issues/41#issuecomment-5244379

当显示大于从 Ipad 为颜色框设置的尺寸的网页时，滚动功能被禁用和/或不存在。

有些人可能会建议用一根手指或两根手指滚动，这是行不通的。

先决条件：拥有一台 Ipad，或者去当地的百思买

重现步骤：转到http://colorpowered.com/colorbox/core/example1/index.html 点击外部网页（Iframe）链接，在 Google 搜索中输入内容

结果：您无法滚动浏览结果。

有解决办法吗？有什么东西可以解决这个问题吗？顺便说一句，这在 IE、Chrome 和 Firefox 上运行良好。

任何机构都可以解决这个问题？？？任何帮助将不胜感激。

4

3 回答 3

6

更新 - 作者固定问题

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

以前的解决方案

好的，我无法让 jScrollPane 正常工作。这并不是说你不会，但我也在使用自定义调整大小来调整 iframe 的大小，我认为它在 jScrollPane 的尺寸计算方面表现不佳。

解决方案

然而，我确实设法让它工作，这要归功于更一般的 iOS iframe 滚动问题的解决方案，这要归功于stackoverflow 上的 Sharon。我对她的代码进行了一些调整，以便更好地使用 colorbox。请注意，这仅适用于您控制 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);

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

包含 Sharon 解决方案的页面提供了一种替代方案，可用于尝试不控制 iframe 的场景。

于 2012-07-06T12:13:11.683 回答
1

我刚刚完成了这个，在我的一般 css 中我添加了#cboxLoadedContent{-webkit-overflow-scrolling: touch;}

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

这适用于 iPad 和 iPhone。

于 2013-01-22T11:32:24.307 回答
0

您是在控制自己的 iframe 内容，还是来自外部网站（即不同域）的内容？如果是后者，我无能为力。

如果您可以控制 iframe 内容，则可以使用jScrollPane 插件来解决您的问题。

你的 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();
    }
});
于 2012-06-27T16:16:16.287 回答