горизонтальная прокрутка iframe не отображается на iOS

Question

Я разрабатываю веб-приложение для iOS HTML 5 и мне нужно отобразить большую страницу с большим количеством текста. Iframe кажется правильным инструментом, поскольку позволяет прокручивать содержимое на небольшом экране. Используя iOS 5+ и overflow: auto; -webkit-overflow-scrolling:touch; в стиле iframe, я могу работать с прокруткой в ​​iframe на iPhone.

Проблема заключается в том, что при горизонтальной прокрутке для просмотра большего количества содержимого фрейма рамка остается пустой, прокрутка вниз работает, как и ожидалось. Я подозреваю, что проблема заключается в фиксированном теге области просмотра:

<meta name="viewport" content="width=device-width; minimum-scale=1.0; initial-scale=1.0; user-scalable=yes">

У меня есть установка iframe:

<div id="framecont" style="height: auto; width: auto; overflow: auto; -webkit-overflow-scrolling:touch;">
    <iframe height="100%" id="iframe" scrolling="no" width="100%"></iframe>
</div>

Будем весьма благодарны за любые советы относительно альтернатив iframe или решения проблемы с рисованием контента.

Answer 1

Лучший способ сделать это - использовать div.Я проверил ваш код, и iframes, кажется, вообще не позволяют горизонтальную прокрутку.

Если вам не нужно получать контент с внешней страницы (как для этого предназначены iframes), это должно работать:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<div id="framecont" style="background-color:red; height: 200px; width: 200px; overflow: auto; -webkit-overflow-scrolling:touch;">
<div class="inside" style="background-color:blue; width: 400px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus tempus enim, ut ornare enim aliquet et. Nunc porta porttitor dolor, ut pharetra augue venenatis et. Ut felis diam, consectetur a viverra a, auctor vel lorem. Ut tempor magna eget sem faucibus adipiscing condimentum ipsum tincidunt. Sed aliquam venenatis enim ut dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing ullamcorper tincidunt. Etiam fermentum arcu quis mi malesuada eget varius lorem convallis.
</div>
</div>

Окно просмотра установлено (я включил его только потому, что оно было на моей тестовой странице), поэтому прокрутка страниц отключена.#framecont div похож на контейнер с заданной шириной и высотой.Внутренний div, .inside, действует как прямой контейнер для содержимого.Ширина установлена ​​на большую ширину, чем родительский div, поэтому он будет прокручиваться горизонтально, чтобы вы могли видеть все остальное в div.

Вам не нужно устанавливать высоту второго div какэто заполнит 100%.Например, вы можете установить для второго div ширину 1000px, если вы хотите прокрутить контент до такой длины, а затем сможете прокрутить эту сумму.

Answer 2

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