Perfect-scrollbar: Scrolling over an iframe

Created on 28 Apr 2015 · 7Comments · Source: mdbootstrap/perfect-scrollbar

Hello. I am using this great plugin in one of my projects, and everything works fine except for one annoying bug.

When scrolling over an iframe mousewheel propagation to parent element doesn't work in Mozilla Firefox, but in Google Chrome it does. Is there any workaround?

Thanks.

Source

Brugarolas

Most helpful comment

Dear @noraesae ,
Please have a look at this example
Why it's not working?

Simoneth on 23 Jan 2017

👍4 😕1

All 7 comments

Maybe similar issue to #98 and #210? It seems like a Firefox-specific issue, according to this bugzilla thread. In short, Firefox doesn't propagate wheel events from an iframe to its container frame. According to previous issues, though, I guess there may be a workaround. You may be able to do like below.

// jQuery
var scrollbox=$(perfectScrollbar_element);
$(iframe_element).contents().find("body").bind('mousewheel', function(e, delta) {
  var scrollTopDelta  = delta > 0 ? -40 : 40; // maybe different for browsers
  scrollbox.scrollTop(scrollbox.scrollTop() + scrollTopDelta).perfectScrollbar('update');
});

The code may be different if you don't use jQuery or jquery-mousewheel plugin, but the basic concept is propagating the iframe wheel event to its container manually.

hatashiro on 29 Apr 2015

Adding onmousewheel="" in iframe fixed my problem with scrollbar in Safari
source: http://kb.tableau.com/articles/issue/scroll-bars-in-embedded-views-do-not-work-in-safari

aivarsak on 7 Sep 2015

😕1

Hi @noraesae ,
I have the same issue with a YouTube iFrame...but this trick didn't help me in Chrome, I can't scroll hover the iFrame

<div class="modal-container"><div id="yt-wrapper"><iframe width="560" height="315" src="//www.youtube.com/embed/34Na4j8AVgA?autoplay=1&amp;rel=0&amp;showinfo=0&amp;egm=0&amp;showsearch=0&amp;controls=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;disablekb=1&amp;version=3&amp;enablejsapi=1" frameborder="0" allowfullscreen="1" style="display: table;margin: 0 auto;"></iframe></div></div>

$(document).ready(function() {
    $('.modal-container').perfectScrollbar();   
});
var scrollbox=$('.modal-container');
$('#yt-wrapper iframe').contents().find("body").bind('mousewheel', function(e, delta) {
  var scrollTopDelta  = delta > 0 ? -40 : 40; // maybe different for browsers
  scrollbox.scrollTop(scrollbox.scrollTop() + scrollTopDelta).perfectScrollbar('update');
});

Simoneth on 23 Jan 2017

👍3

Dear @noraesae ,
Please have a look at this example
Why it's not working?

Simoneth on 23 Jan 2017

👍4 😕1

Works for me over CKEDITOR :)

fkg.$scroll = self.$th.parents(".fkit_scroll");
            var ckeditor_id = self.$th.attr("id");
            if(!ckeditor_id) {
                return false;
            }
            CKEDITOR.instances[ckeditor_id].on( 'contentDom', function() {
                var editable = CKEDITOR.instances[ckeditor_id];

                editable.document.on( "mousewheel", function(e) {
                    var scrollTopDelta = e.data.$.wheelDelta > 0 ? -40 : 40; // maybe different for browsers
                    fkg.$scroll.scrollTop(fkg.$scroll.scrollTop() + scrollTopDelta).perfectScrollbar('update');
                });
            });

agrublev on 20 Apr 2017

👍1

Works for me over ckeditor :)

var editor = CKEDITOR.replace( 'editor');

editor.on( 'contentDom', function() {

        var editable = editor.editable();
        var win = this.document.getWindow();

        editable.attachListener( editable.getDocument(), 'wheel', function(e) {                                      

            var scroll = win.getScrollPosition();   
            var scrollTop = scroll.y;   
            var scrollTopDelta = e.data.$.deltaY;                        
            var scrollerOuter = $('.hrgmail_scroll_content');
            var dragger = scrollerOuter.find('.mCSB_dragger');
            var scrollHeight = scrollerOuter.find('.mCSB_container').height();
            var draggerTop = dragger.position().top;


                var scrollTop = draggerTop / (scrollerOuter.height() - dragger.height()) * (scrollHeight - scrollerOuter.height());

                var mscScrollTop = scrollTop + scrollTopDelta;
                if (scrollTop < y && scrollTopDelta < 0)
                    mscScrollTop = 0;

                $('.hrgmail_scroll_content').mCustomScrollbar("scrollTo", mscScrollTop, {
                    scrollInertia: 800,
                    scrollEasing:"easeOut"
                });

        });
    });