jScrollPane + Embedded Youtube Video Hover

Question

I am using a jscrollpane to incorporate a custom scroll bar into my site.

The users of my site have recently started to embed youtube videos into the content within the jsscrollpane container.

The problem I'm having is that when the user scrolls, whilst hovering over the content, as soon as they reach a youtube video. The scroll stops.

I have recently found that adding pointer-events:none corrects the problem. But i've just discovered that this disables the on hover play button interaction with the video.

Has anyone come across this problem before? Can anyone offer a solution?

Here is a chunk of my code:

<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>

Thanks in advance.

Answer 1

Basically. The solution was to remove jscrollpane and use the default overflow style attribute to incorporate the cross browser wide default scroll functionality. I think this implementation was just "old" to conform the style of the scrollbar across all browsers at the time.