Colorbox content not scrolling on mobile safari

Question

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

Looking at your test site, you appear to have solved this issue. Would you care to share your solution with the rest of us? — Ian Stanway, Jun 18 '12 at 13:29

score 7 · Answer 1 · answered Mar 26 '13 at 23:50

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

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

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.

edited May 23 '17 at 11:59

Community

1
1

answered Jul 10 '12 at 08:43

Ian Stanway

610
8
25

score 0 · Answer 3 · answered Sep 22 '17 at 09:17

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>

score 0 · Answer 4 · answered Feb 01 '11 at 12:54

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.

Colorbox content not scrolling on mobile safari

4 Answers4