jScrollPane + 嵌入式 Youtube 视频悬停

Posted

技术标签:

【中文标题】jScrollPane + 嵌入式 Youtube 视频悬停【英文标题】:jScrollPane + Embedded Youtube Video Hover 【发布时间】:2016-09-12 11:46:43 【问题描述】:

我正在使用 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"  src="https://www.youtube.com/embed/youtubevideo"  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>

提前致谢。

【问题讨论】:

【参考方案1】:

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

【讨论】:

以上是关于jScrollPane + 嵌入式 Youtube 视频悬停的主要内容,如果未能解决你的问题,请参考以下文章

在 JScrollPane 上设置滚动条

JScrollPane添加到JFrame中,怎么不显示呢?

html Youtube嵌入将youtube手表网址转换为youtube嵌入网址

嵌入没有任何徽标或 youtube 链接的 youtube 视频

如何更改嵌入式 Youtube 视频的速度

如何修复折叠的嵌入式 YouTube 视频?