jQuery scroll() event doesn’t propagate

2 Views

I have one wordpress plugin which displays popup on scroll. So I have code like this: 

jQuery(window).scroll(function(){
    //display popup
});

I have problem with one site. The site has those css rules:

Read More
html, body {
    overflow: hidden;
}

div#pageWrap {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

So scroll event is not triggering on window and my popup doesn’t work. So in this case I should set scroll event on #pageWrap div instead on window because scroll event doesn’t propagate: 

jQuery("#pageWrap").scroll(function(){
    //display popup
});

My question is can I handle this dinamicaly. I cannot change code of my plugin for each site where I have this problem. Is possible to do something like make scroll event to propagate or to set some failback. Any idea about this will be helpful.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. I can’t promise that this will accommodate all edge cases, but it should take care of most of them.

    JS:

    jQuery.fn['any'] = function() {
     return (this.length > 0);
};

if (jQuery("html").css('overflow') == 'hidden') {
    if (jQuery("body").css('overflow') == 'hidden') {
        var scrollElement = jQuery('*').filter(function() { return jQuery(this).css('overflow') == 'scroll'; });
        if (!scrollElement.any()) {
            var scrollElement = jQuery('*').filter(function() { return jQuery(this).css('overflow-y') == 'scroll'; });
            jQuery(scrollElement[0]).scroll(function(){
                //display popup
            });
        }
        else {
            jQuery(scrollElement[0]).scroll(function(){
                //display popup
            });
        }
    }
    else {
        jQuery("body").scroll(function(){
            //display popup
        });
    }
}
else {
    jQuery(window).scroll(function(){
        //display popup
    });
}

    https://jsfiddle.net/hopkins_matt/d0gtqkat/

  2. I don’t think there’s a global solution for this issue, but maybe you’ll find some close solutions.

    The close solution in my mind is to find the div element that has (overflow=’scroll’) and it’s width and height are very close to the width and height of the window.

    if you found more than one div like that then you need to deal with the deepest div in the DOM.

    if you haven’t found any div like that, then you deal with jQuery(window) instead.