jQuery Colorbox, iframe content not scrolling in iPad

Question

Colorbox iframe content does not scroll when viewed on iPad please read below:

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

When displaying a web page that is larger than the dimensions set for the colorbox from an Ipad, the ability to scroll is disabled and/or does not exist.

Some might suggest one finger or two fingered scrolling, this does not work.

Pre-reqs: Own an Ipad, or go down to local best buy

Steps to reproduce: Go to http://colorpowered.com/colorbox/core/example1/index.html Click on Outside Webpage (Iframe) link, Enter something into the Google Search

Results: You are unable to scroll through the results.

Is there a fix for this? Is there something in the works to fix this issue? BTW, this works fine on IE, Chrome, and Firefox.

Any body got a work around for this??? any help would be greatly appreciated.

Answer 1

UPDATE - AUTHOR FIXED ISSUE

Apparently Jack has fixed this issue as of today (4th Feb 2013). It's worth taking the latest release from his Github page.

---

Previous Solution

OK, I couldn't get jScrollPane working properly. That's not to say you won't, but I was also using custom resizing to resize the iframe and I don't think it was playing well with jScrollPane's dimensions calculations.

Solution

I did, however, manage to get it working thanks to a solution to the more general iOS iframe scroll issue, thanks to Sharon here on stackoverflow. I have made a couple of tweaks to her code to play nicer with colorbox. Please note that this only works where you control the iframe content

Simply put the following code into your 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);

The scrolling is not jittery, although you don't have the gradual slowdown of native scrolling, it just stops when you lift your finger. Plus, there's no scrollbar. Other than that it's a perfect solution.

The page with Sharon's solution offers an alternative to try for scenarios where you don't control the iframe.