Как сделать так, чтобы содержимое динамически прокручивалось в DIV на сафари Iphone или в наборе Android?

Question

мой код:

for(var myLine = 0; myLine < 100; myLine++)
      document.getElementById("myDiv").innerHTML += "line " + myLine + "<br>";


...............

<div style="position:...etc; overflow:auto;" id="myDiv"></div>

это работает без сбоев в любом браузере на всех не мобильных платформах.Однако ... когда это реализовано на iPhone (Safari) или Android (webkit), div заполняется текстом, но полоса прокрутки не создается, когда текст превышает высоту div, и пользователь не может «нажать»содержание вниз тоже.Поэтому эффективное переполнение всегда «скрыто», несмотря ни на что.

Мне любопытно, есть ли какой-то альтернативный подход, который я пропускаю, или это просто ошибка, которую я не могу обойти в данный момент.

Answer 1

Это известная проблема в мобильном веб-наборе: http://www.quirksmode.org/webkit.html. Ищите overflow.

Решение этого вопроса iScroll .

Answer 2

На самом деле iOS ведет себя правильно.Пользователь должен использовать два пальца для прокрутки любой области прокрутки на странице, которая не является всей страницей.(иначе как браузер узнает, что пользователь собирается прокрутить div или его контейнер, когда они оба заполняют экран на неоптимизированной странице.)

Лучший способ обойти «функцию» - этореализовать обработчик сенсорных событий, который перемещает div вверх, когда пользователь касается его.Отличным примером этого на практике является пример кода FingerTips от Apple.

Apple использует именно эту технику при просмотре библиотеки разработчиков Safari на iPad.

Answer 3

Я думаю, что проблема заключается в настройке innerHTML, и вот аналогичный post .

Эта функция вызывается на iPhone после того, как dom загружен и готов?