0

カスタム スクロール バーをサイトに組み込むために jscrollpane を使用しています。

私のサイトのユーザーは最近、jsscrollpane コンテナー内のコンテンツに YouTube ビデオを埋め込み始めました。

私が抱えている問題は、ユーザーがコンテンツにカーソルを合わせているときに、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>

前もって感謝します。

4

1 に答える 1