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

Question

在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.

任何一个团体为此工作了？任何帮助将不胜感激.

Answer 1

更新 - 作者固定问题

显然杰克已于今天(2013年2月4日)解决了这个问题.值得从他的Github页面获取最新版本.

以前的方案

好的,我无法让jScrollPane正常工作.这并不是说你不会,但我也在使用自定义大小调整来调整iframe的大小,我认为它与jScrollPane的维度计算并不匹配.

解

然而,由于Sharon在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);

滚动不是紧张,虽然你没有逐渐减慢原生滚动,它只是在你举起手指时停止.另外,没有滚动条.除此之外,它是一个完美的解决方案.

使用Sharon解决方案的页面提供了另一种方法,可以尝试不控制iframe的场景.