jScrollPane +嵌入式Youtube视频悬停

我正在使用jscrollpane将自定义滚动条合并到我的网站中。jScrollPane +嵌入式Youtube视频悬停

我的网站的用户最近已经开始将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>

在此先感谢。

来源

2016-09-12 cwiggo

基本上。解决方案是删除jscrollpane并使用默认的溢出样式属性来合并跨浏览器的默认滚动功能。我认为这个实现只是“旧的”，以符合当时所有浏览器的滚动条样式。

来源

2016-09-12 13:27:46 cwiggo

jScrollPane +嵌入式Youtube视频悬停

回答

相关问题