Я использую jscrollpane для включения пользовательской полосы прокрутки на свой сайт.
Пользователи моего сайта недавно начали вставлять видео с YouTube в содержимое контейнера jsscrollpane.
Проблема, с которой я сталкиваюсь, заключается в том, что когда пользователь прокручивает, наводя курсор на контент, как только он достигает видео на YouTube. Прокрутка останавливается.
Недавно я обнаружил, что добавление pointer-events:none
решает проблему. Но я только что обнаружил, что это отключает взаимодействие кнопки воспроизведения при наведении с видео.
Кто-нибудь сталкивался с этой проблемой раньше? Кто-нибудь может предложить решение?
Вот кусок моего кода:
<div class="scroll-pane jspScrollable" style="overflow: hidden;padding: 0px;width: 587px;" tabindex="0">
<div class="jspContainer" style="width: 587px; height: 528px;">
<div class="jspPane" style="padding: 0px; width: 567px; top: -799px;">
<h1 class="title" id="page-title">HEADING</h1>
<p>TEXT</p>
<p>TEXT</p>
<p><iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/youtubevideo" width="560" style="
/* pointer-events: none; */
"></iframe></p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
</div>
</div>
</div>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop">
</div>
<div class="jspTrack" style="height: 524px;">
<div class="jspDrag" style="height: 57px; top: 85.9555px;">
<div class="jspDragTop">
</div>
<div class="jspDragBottom">
</div>
</div>
</div>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
Заранее спасибо.