Прокрутка iframe на iphone

Мне было известно о нескольких библиотеках прокрутки (TouchScroll, iScroll) для iPhone/iOS из-за его неспособности (???) для поддержки переполнения: прокрутка. Тем не менее, я не знал (и я ищу подтверждение), что IFRAME тоже не работают. Похоже, что iframe не уважает попытку дать ему фиксированный размер и всегда просто изменяет свое содержание. Правильно ли я это понимаю? Единственный способ прокрутить IFRAME, чтобы поместить его внутри элемента блока с помощью свойства CSS переполнения, а затем использовать lib, как упомянутый выше?

Ответы

Ответ 1

просто добавив...

overflow-y:auto; 
-webkit-overflow-scrolling:touch;

для div вокруг моего iframe работал у меня

Ответ 2

Вы можете пролистать любой контент, который настроен на переполнение: автоматически с помощью касания двумя пальцами и перетаскивания. Не помещайте iFrame внутри div с переполнением: auto и вместо этого устанавливайте iframe для переполнения: автоматически. К сожалению, прокрутка iframe очень изменчивая, независимо от содержимого или устройства, поэтому наилучшим решением является поиск способа вставить ваш контент в одну длинную страницу, а верхние и нижние видные div должны быть установлены в окне просмотра (если это тот эффект, который вы собираетесь делать.)

Ответ 4

Код ниже работает для меня (спасибо Кристофер Циммерманн за его сообщение в блоге http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/). Проблемы: 1. Нет полос прокрутки, чтобы пользователь знал, что они могут прокручивать 2. Пользователи должны использовать прокрутку с двумя пальцами 3. Файлы PDF не центрированы (все еще работают над ним)

    <!DOCTYPE HTML>
    <html>
    <head>
      <title>Testing iFrames on iPad</title>
      <style>
      div {
        border: solid 1px green;
        height:100px;
      }

    .scroller{
        border:solid 1px #66AA66;
        height: 400px;
        width: 400px;
        overflow: auto;
        text-align:center;

    }
    </style>

</head>

<body>

    <table>
      <tr>
        <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
        <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
      </tr>
      <tr>
      <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
        <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
      </tr>
    </table>
    <div> Here are some additional contents.</div>
</body>
</html>

Ответ 5

Ответ на Flippant: больше не используйте IFRAMES.