Предотвращение захвата прокрутки iframe на YouTube - PullRequest
Новая
       35

Предотвращение захвата прокрутки iframe на YouTube

0 голосов
/ 30 декабря 2018

У меня есть стандартный iframe для вставки YouTube из случайного видео: 

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/ixJ5NbvXg_A" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

Я дублировал это пару раз, чтобы получить некоторое переполнение прокрутки. 

<html>
<head></head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</body></html>

Когда я обслуживаю этопри использовании сервера django на localhost iframes предотвращают прокрутку страницы.

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

Действительно забавная вещьэто когда я вставляю тот же код и сохраняю его в локальный файл на рабочем столе.Затем откройте его с помощью Chrome, прокрутка будет работать с видео YouTube.

Я проверил в инструментах разработчика, обслуживаемый файл имеет точно такой же HTML.Там нет 100% CSS или Javascript, нет шаблонов, ничего.В обоих случаях используется только простой html-файл.

Версия 71.0.3578.98 (Официальная сборка) (64-разрядная версия)

Ответы [ 5 ]

0 голосов
/ 04 февраля 2019

Моей конкретной проблемой была ошибка в Chrome.Это решится, если я перезапущу браузер.

0 голосов
/ 10 января 2019

Попробуйте, последний ответ - https://github.com/alvarotrigo/fullPage.js/issues/2229

0 голосов
/ 05 января 2019

звучит для меня как ошибка в браузере;Вот простой сценарий, который предотвратит это.Он добавляет событие прокрутки в окно, которое отключает события указателя на фреймах всякий раз, когда страница прокручивается, а затем повторно включает их через 100 мс после остановки прокрутки.Поскольку событие добавляется в режиме захвата, оно срабатывает до того, как событие может быть перехвачено iframe. 

<script>

  (function() {

    var iframes, locked = null;
    window.addEventListener("scroll", scroll, true);

    function scroll(e) {

      if (!locked) {
        iframes = document.querySelectorAll('iframe');
        lock('none');
      }

      clearTimeout(locked);
      locked = setTimeout(function() {
        locked = null;
        lock('auto');
      }, 100);

    }

    function lock(value) {
      for (var i = 0; i < iframes.length; i++) {
        iframes[i].style.pointerEvents = value;
      }
    }

  })();

</script>
0 голосов
/ 07 января 2019

Это прекрасно работает в моих браузерах: 

<html>
<head></head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</body></html>

Можете ли вы опубликовать фрагмент, воспроизводящий проблему?

0 голосов
/ 04 января 2019

Вы можете попытаться изменить CSS тела как 

body{
    overflow: auto;
}
...