Question

我使用此plugin更改滚动条的方面。

尽管做了所有尝试，但我无法使其正常工作，事实上如果我在iFrame上方滚动页面时，滚动条无效，您可以在此代码段中看到：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我可以设置iFrame z-index:-1来解决此问题，但随后iFrame无法再点击。

为什么在使用Perfect Scrollbar悬停iFrame时无法滚动页面？

Answer 1

您可以使用指针事件来实现此目的。这是一个例子

$("#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>

首先将指针事件：none添加到iframe。
然后设置指针事件：在点击iframe的包装器时自动为＃G-wrapper。
当鼠标离开＃G-wrapper时，最后将指针事件设置为无。

Answer 2

问题是浏览器认为你试图滚动我的框架。尝试在父页面中放置一个透明的div或gif覆盖我的框架。这可能会阻止徘徊进入iframe。

Answer 3

当然，您需要使用包装器来实现指针事件，在完美的滚动条类包装器之上。

$('.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">

 <!-- pointer-event wrapper -->
<div style="position:absolute;height:5000px;width:5000px;z-index:1" onClick="style.pointerEvents='none'">
</div>

         <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>

添加此

<div style="position:absolute;height:5000px;width:5000px;z-index:1" onClick="style.pointerEvents='none'"></div>

以下父母

<div class="udoplus twelve columns">

如何防止停止滚动悬停iFrame（完美滚动条）？

3 个答案: