устройство с сенсорным экраном, прокрутка невозможна при переполнении: авто и фиксированная высота

Question

Я создал тему, чтобы она использовала 100% высоты страницы.

Основой макета является следующее: контейнер div # содержит 3 элемента div, верхний и нижний колонтитулы, содержимое. Все размещены абсолютно в #container, верхний колонтитул 14%, нижний колонтитул 6%, остальное для контента. Все элементы div, кроме содержимого, переполнены: скрыто, содержимое переполнено: авто.

Отлично работает в большинстве браузеров для настольных компьютеров (FF3.6 +, IE 8+, Opera 10.5+, актуальный Chrome). На устройстве с сенсорным экраном все хорошо, но у меня нет ни полосы прокрутки, ни возможности прокрутки контента #.

Тестовая страница: http://pearlofdanube.hu

Протестировано со встроенным браузером Android 2.2 и Opera Mobile, некоторые сообщили, что то же самое с iPhone.

Кто-нибудь имеет представление о правильном обходном пути, без базовых изменений в макете? Заказчик действительно хочет иметь одинаковое расположение любого устройства.

Answer 1

iSCroll может вам помочь. Вы должны установить обертку вокруг всего вашего контента в размер, который вы хотели бы, чтобы скроллер был. Тогда:

function loaded() {
    document.addEventListener('touchmove', function(e){ e.preventDefault(); });
    myScroll = new iScroll('scroller');
}
document.addEventListener('DOMContentLoaded', loaded);

'scroller' - это обязательный идентификатор, который будет заменен на идентификатор элемента, который вы хотите прокрутить. Надеюсь, это поможет.

Вот демонстрация, на которую вы можете взглянуть http://cubiq.org/dropbox/iscroll4/examples/simple/