Остановить Iframe от предотвращения прокрутки родительского документа?

Ответ 1

Вопрос непонятен, поэтому я подробно рассмотрел несколько способов достижения этого эффекта и того, как он работает.

Если вам не нужно взаимодействовать с iframe, быстрое и грязное решение - использовать pointer-events: none; , Это положит iframe на страницу и не позволит ей прокручивать. Однако он также не позволяет вам щелкнуть по нему. Очевидно, что это не будет работать для видео YouTube, но важно знать, что это вариант.

Если вам нужно взаимодействовать с iframe, чтобы воспроизвести видео или щелкнуть ссылку, все, что вам нужно сделать, это убедиться, что iframe достаточно большой, чтобы отобразить полное содержимое. Я не знаю, с какими конкретными проблемами сталкивался OP, поскольку у нас нет их HTML, но если вы прокручиваете и iframe также не пытается прокручивать, это не помешает прокрутке родителя.

В принципе, если вы наводите курсор на iframe и прокручиваете, iframe получит событие первым. Если ему не нужно прокручивать (либо он не может, либо он уже достиг дна iframe), событие будет передано родительскому элементу.

Наконец, если у вас есть iframe, что вам нужно прокручивать, но вы хотите прокрутить родителя, пока курсор находится на iframe, вам не повезло. Невозможно сообщить iframe, что иногда пользователь хочет прокрутить всю страницу. Это просто то, как работают iframes. Вы можете либо удалить курсор из iframe для прокрутки, либо прокрутить до нижней части iframe и продолжить работу по странице.

Используя видео YouTube и CSS в этом вопросе, я включил демоверсию для вас. Я также включил два идентичных iframes, которые являются прокручиваемыми и применяемыми pointer-events: none; чтобы продемонстрировать, как это работает.

.tall {
  height: 1500px;
}

.GalleryVideoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
  width: 95%;
  margin: auto;
  display: block;
}

.GalleryVideoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.scrolling-iframe {
  margin-top: 35px;
  display: inline-block;
  height: 500px;
}

.no-scroll {
  pointer-events: none;
}

<div class="tall">
  <div class="GalleryVideoWrapper">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/hzB53YL78rE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
  <iframe class="scrolling-iframe" src="https://www.wikipedia.org/" frameborder="1"></iframe>
  <iframe class="scrolling-iframe no-scroll" src="https://www.wikipedia.org/" frameborder="1"></iframe>
</div>

Ответ 2

Я отключил горизонтальную прокрутку:

html, body {
    overflow-x: hidden
}

На странице с iframe, если я попытался прокрутить страницу по вертикали, нажав и переместив iframe на Safari для iPad или iPhone, я не смог.

Это исправлено для меня:

* {
    -webkit-overflow-scrolling: touch
}

Ответ 3

Раньше был атрибут прокрутки, но он устарел в html5. попробуйте следующее:

iframe {
    overflow: hidden;
}

Не забудьте указать ширину и высоту где-нибудь!

Если вы хотите попробовать атрибут прокрутки iframe, вам может понравиться следующее:

<iframe src="blah.html" width="200" height="200" scrolling="no"></iframe>

См. рабочий пример здесь: http://jsfiddle.net/4dt4zhwt/1/

Ответ 4

Я не знаю, нашли ли вы способ обойти это, но у меня была та же проблема, что и все iframe (твиттер, facebook и youtube) на моем сайте не позволяли прокручивать страницу. После много отладки и кофе я нашел его, по крайней мере, в моем случае. Это было до скрытого overflow-x: hidden, установленного на родительском элементе 4/5. Удаление свойства переполнения исправило проблему для меня, надеюсь, это сработает для вас!