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 回答