Содержимое Colorbox не прокручивается в мобильном сафари

Добрый вечер,
Я создал веб-сайт, используя толстое окно, где он отображает календарь, и одна из обнаруженных проблем заключается в том, что содержимое не будет прокручиваться в браузерах типа iPhone. Я попытался обновить его до colorbox и посмотреть, исправит ли это проблему, а это не так.

Как заставить мобильный браузер разрешить прокрутку содержимого?

Вот страница, которую я использовал, чтобы попытаться выяснить проблему: http://hsr-bsa.org/test/test.php

Спасибо,
Майк


mobile browser colorbox
person Mike Di Domenico    schedule 10.01.2011    source источник
comment
Судя по вашему тестовому сайту, вы решили эту проблему. Не могли бы вы поделиться своим решением с остальными из нас?   -  person Ian Stanway    schedule 18.06.2012

Ответы (4)


arrow_upward
7
arrow_downward

Благодаря Джеку Муру, файл colorbox css был обновлен, чтобы решить эту проблему:

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

Изменение вашей таблицы стилей с помощью специального правила переполнения webkit должно помочь. Нет необходимости обновлять какую-либо функцию javascript.

Источник.

person Matthew3k    schedule 26.03.2013

arrow_upward
0
arrow_downward

Похоже, это ограничение мобильной версии Webkit.

На на этой странице утверждается, что ее можно обойти, прокручивая двумя пальцами области с переполнением: набор прокрутки. Я не смог попробовать это на себе, так как мне не удалось заполучить ipad компании, чтобы протестировать его.

person GordonM    schedule 01.02.2011

arrow_upward
0
arrow_downward

Если кто-то ответит на этот вопрос, см. мой ответ по этому же вопросу в другой ветке. Обратите внимание, что вам нужно контролировать содержимое iframe, т.е. в том же домене.

person Ian Stanway    schedule 10.07.2012

arrow_upward
0
arrow_downward

Это хорошо работает для меня

<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>
person Sandeep Sherpur    schedule 22.09.2017