Блог

Главная - Вопросы по программированию - устройство с сенсорным экраном, прокрутка невозможна при переполнении: автоматическая и фиксированная высота

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

#css #touchscreen

#css #сенсорный экран

Вопрос:

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

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

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

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

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

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

Комментарии:

1. Я знаю, что это старый пост, но вы когда-нибудь находили решение css / html для этого? В настоящее время у меня точно такая же проблема…

Ответ №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