How to prevent stop scrolling hovering an iFrame (Perfect Scrollbar)?

Question

I'm using this plugin to change the aspect of my scrollbar.

Despite all attempts, I can not make it work correctly, indeed if I scroll the page when I'm above the iFrame, the scroll doesn't work as you can see in this snippet:

$('.modal-container').perfectScrollbar();

.row-body {
    overflow: hidden;
    padding: 0;
}
.row-body, .row-page {
    box-sizing: border-box;
    border-bottom: 0;
    width: 100%;
    margin: 0 auto;
}
.row-body .twelve {
    width: 100%;
    height:100vh;
}
.body-content {
    background: #191919;
    overflow: hidden;
    padding-bottom: 30px;
}
.udoplus {
    position: relative;
    z-index: 11;
    height: 180px;
}
.column, .columns {
    float: left;
    min-height: 1px;
    position: relative;
}
.event-video, .event-music {
    width: 80%;
    margin: 0 auto;
}
#yt-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
#yt-wrapper iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}
#main-content {
    bottom: 0;
    position: absolute;
    top: 46px;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.row-body .twelve {
    width: 100%;
}
.ps-container {
    -ms-touch-action: auto;
    touch-action: auto;
    overflow: hidden !important;
    -ms-overflow-style: none;
}
.wrap-main {
    margin: 0 auto;
    max-width: 1440px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.16/js/perfect-scrollbar.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.16/css/perfect-scrollbar.min.css" rel="stylesheet"/>
<div class="row-body content-track">
   <div class="body-content">
      <div class="udoplus twelve columns">
         <div class="columns modal-container twelve" id="main-content">
            <div class="wrap-main">
               <div class="message-type-player event-video">
                  <div id="yt-wrapper">
                     <iframe width="560" height="315" src="//www.youtube.com/embed/_uSHnm3t1og?autoplay=0&rel=0&showinfo=0&egm=0&showsearch=0&controls=0&modestbranding=1&iv_load_policy=3&disablekb=1&version=3&enablejsapi=1" frameborder="0" allowfullscreen="1" style="display: table;margin: 0 auto;"></iframe>
                  </div>
               </div>
               <div class="message-type-player event-music">
                  <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280186218&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

I can set for the iFrame z-index:-1 to solve this issue but then the iFrame it's not clickable any longer.

Why I cannot scroll the page when hovering an iFrame using the Perfect Scrollbar?

Answer 1

You can achieve this using pointer-events. Here is an example

$("#G-wrapper").click (function () {
  $(this).find ("iframe").css ("pointer-events", "auto");
});
$("#G-wrapper").mouseleave (function () {
  $(this).find ("iframe").css ("pointer-events", "none");
});

section { padding: 100px 0; background: #aaa; }
#G-wrapper { width: 600px; margin: auto; }
#G-wrapper iframe{ pointer-events: none; }

@media screen and (max-width: 767px) {
  #G-wrapper { width: 300px; }
  #G-wrapper iframe{ width: 300px; height: 200px; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div id="G-wrapper">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d29543265.298030272!2d66.61594368822634!3d9.70162446756163!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1487942616931" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>
</section>

• First add pointer-events: none to the iframe.
• Then set pointer-events: auto when wrapper for the iframe is clicked in this case it's #G-wrapper.
• Finally set the pointer-events back to none when mouse leave the #G-wrapper.

Answer 2

The problem is the browser thinks you are trying to scroll that I frame. Try putting a transparent div or gif overlaying that I frame in the parent page. That may stop the hovering from going into the iframe.