Iframe прокрутка iOS 8

У меня есть iframe, и мне нужно, чтобы он переполнял прокрутку. кажется, работает на рабочем столе, я использовал работу, чтобы заставить ее работать в iOS. теперь он работает на Android и iOS. однако iOS8 не работает.

    <html>
    <body>
    <style type="text/css">
      .scroll-container {
       overflow: scroll;
       -webkit-overflow-scrolling: touch;
      }
     #iframe_survey {
      height: 100%;
     }

    .scroll-container {
     height: 100%;
     width: 100%;
     overflow: scroll;
     }
   </style>

   <div class="scroll-container scroll-ios">
   <iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
   </div>
   </body>

ОТВЕТЫ

Ответ 1

Используйте код таким образом

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
    <iframe style="width:100%;height:600px" src="www.iframe.com"></iframe>
</div>

Ответ 2

Чтобы сделать iframe прокручиваемым в iOS, вы должны добавить свойство CSS3 -webkit-overflow-scrolling: touch в родительский контейнер:

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
  <iframe src="./yxz" style="width:100%;height:100%">
</div>

Ответ 3

Наконец-то я получил работу после многих часов и тестирования. В основном то, что сработало для меня, было (показано как встроенный стиль для демонстрации). Создание внешнего переполнения div не позволяет отображать дополнительный набор полос прокрутки на рабочих столах.

<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;"> 
   <iframe src="http://www.mywebsiteurl.com" style="width: 100%; height: 600px; display: block; overflow: scroll; -webkit-overflow-scrolling: touch;" ></iframe>
</div>

Ответ 4

это не сработало для меня! но после прочтения этого поста я мог бы найти небольшой трюк: https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/

Просто положите! важно после этого и отлично работает!

-webkit-overflow-scrolling: touch !important;
overflow-y: scroll !important;

Ответ 5

В iOS 8 есть ошибка, которая ломает прокрутку все вместе, когда -webkit-overflow-scrolling: touch применяется к чему-либо, что переполнено.

Взгляните на вопрос, который я опубликовал несколько недель назад: -webkit-overflow-scrolling: touch; перерывы в iOS8 от Apple

Ответ 6

Обязательный параметр определяет ваш scroll-container - fixed для div - полноэкранный размер. Затем внутри iframe создайте основной контент, у которого есть прокрутка свойств.

Внутри iframe, в mainContainer-scroll, вы можете добавить:

  • -webkit-overflow-scrolling: touch//Для активного плавного прокрутки
  • -webkit-transform: translate3d(0, 0, 0)//Для ускорения материала
  • overflow-y:scroll;//Для добавления прокрутки в оси y
  • position:absolute;height:100%;width:100%;top:0;left:0;//Для исправления контейнера

Главная страница

<html>
    <head>
        <style type="text/css">
            #iframe_survey {
                height: 100%;
            }

            .scroll-container {
                height: 100%;
                width: 100%;
                position:fixed;
            }
        </style>
    </head>
    <body>
        <div class="scroll-container scroll-ios">
            <iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
        </div>
    </body>
</html>

Внутри iframe

<div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;top:0;left:0;-webkit-overflow-scrolling: touch;-webkit-transform: translate3d(0, 0, 0);overflow-y:scroll;">
    <div class="Content" style="height:2000px;width:100%;background:blue;">
    </div>
</div>

Ответ 7

Я обнаружил, что исправления 1 и 2 работают на iOS 11, но я также обнаружил, что при загрузке отзывчивой страницы в iframe overflow-x: hidden; также необходимо было сохранить iframe от перемещения влево и вправо при прокрутке y попыток. Просто FYI.

Ответ 8

Не зная, что находится на другом конце "www.iframe.com"... но для меня в этом файле css я добавил:

body {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

Это исправлено.

Ответ 9

Вы должны использовать стиль тела или переполнение: прокрутки;

Или также используйте

<div style="width:100%;height:600px;overflow:auto;-webkit-overflow-scrolling:touch">
<iframe style="overflow:scroll;" src="www.iframe.com"></iframe>
</div>

Ответ 10

Я смог сделать прокрутку iframe в iOS, поместив iframe внутри div (который действует как контейнер) и применил стили следующим образом, и это отлично работает.

.iframe {
    overflow: scroll !important;
    width: 100%;
    height: 100%;
    border: none;
}

.div {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: none;
    background-color: #FFF;
}

Как я работаю в GWT, для людей GWT это предложение. В случае GWT просто поместите iframe в ScrollPanel (div) и примените стили, как указано выше.