javascript – 如何防止停止滚动悬停iFrame(完美滚动条)？

尽管所有尝试,我无法使其正常工作,确实如果我在iFrame之上滚动页面,滚动将不起作用,您可以在此代码段中看到：

$('.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>

我可以设置iFrame z-index：-1来解决这个问题,但是iFrame不再可以点击.

为什么在使用完美滚动条悬停iFrame时无法滚动页面？