admin管理员组

文章数量:1352192

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=".1.3/jquery.min.js"></script>
<script src=".perfect-scrollbar/0.6.16/js/perfect-scrollbar.jquery.min.js"></script>
<link href=".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/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="/?url=https%3A//api.soundcloud/tracks/280186218&amp;auto_play=false&amp;hide_related=false&amp;show_ments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

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./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery.perfect-scrollbar/0.6.16/js/perfect-scrollbar.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./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./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./player/?url=https%3A//api.soundcloud./tracks/280186218&amp;auto_play=false&amp;hide_related=false&amp;show_ments=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?

  • javascript
  • jquery
  • perfect-scrollbar
Share Improve this question edited Feb 21, 2017 at 10:28 NineCattoRules asked Feb 17, 2017 at 18:35 NineCattoRulesNineCattoRules 2,4587 gold badges42 silver badges91 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div id="G-wrapper">
    <iframe src="https://www.google./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.

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.

Of course you need wrapper to implement pointer-event, above the perfect scrollbar class wrapper.

$('.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./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery.perfect-scrollbar/0.6.16/js/perfect-scrollbar.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./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./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./player/?url=https%3A//api.soundcloud./tracks/280186218&amp;auto_play=false&amp;hide_related=false&amp;show_ments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

add this

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

below div parent

<div class="udoplus twelve columns">

本文标签： javascriptHow to prevent stop scrolling hovering an iFrame (Perfect Scrollbar)Stack Overflow

版权声明：本文标题：javascript - How to prevent stop scrolling hovering an iFrame (Perfect Scrollbar)? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743910069a2560231.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。