Colorbox content not scrolling on mobile safari

Good Evening,

I created a website using the thickbox where it displays a calendar and one of the problems that has surfaced is the content will not开发者_Go百科 scroll on iPhone type browsers. I have tried to update it to the colorbox and see if that fixed the problem and it did not.

How do I get the mobile browser to allow content to scroll?

Here is a page that I have been using to try and figure the problem out: http://hsr-bsa.org/test/test.php

Thanks,

Mike

With thanks to Jack Moore, the colorbox css file has been updated to address this:

#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}

Amending your stylesheet with the webkit specific overflow rule should do the trick. No need to update any javascript function.

Source: https://github.com/jackmoore/colorbox/commit/ca4e63c71cf1ec00fb3340f2e1a0a5512cbc8f0a

This appears to be a limitation of the mobile version of Webkit.

This page claims you can work around it by two finger scrolling within regions with overflow:scroll set. I've not been able to try this out for myself though as I've not managed to get hold of the company ipad to test it.

If anyone happens on this answer question, please see my answer on this very question on another thread. Note that you need to control the iframe contents i.e. on the same domain.

This work well for me

<script>
    var devicetype = '<?php echo $devicetype; ?>';// get ur divice type variable
    if(devicetype == 'mobile'){
        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);
    }
    </script>