jQuery scroll() event doesn't propagate

Question

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:

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.

#pageWrap and window are the only options? no other option you need to deal with? — Baraa Al-Tabbaa, Feb 13 '15 at 02:03
No, this is just one example where I had the problem. Any other wrapper could be set to overflow: scroll; The point is that i need to show my popup when user scroll 80% of the page. So when there are css rules like this one, scroll doesn't work on window so I need to dynamically find which element is scrolling or set scroll to propagate or any other solution just to show my popup after 80% scroll — masacenje, Feb 13 '15 at 02:13
Why is there an `overflow: hidden` on the html & body elements when the intention is to allow users to scroll? The worst case scenario just change the overflow value dynamically like so: `$('html, body').css('overflow', 'auto')` before attaching the scroll event. — istos, Feb 13 '15 at 05:10
overflow: hidden on the html & body is not set by me. It's set on customer site who use my plugin and my plugin has event scroll attached on window. So I need to handle this case in my plugin programmatically. If I set 'overflow', 'auto' to body and html it still doesn't work until I remove overflow : 'scroll' from wrap div. Is there an event that fires when scrolling reach bottom of window or something. — masacenje, Feb 13 '15 at 12:34
I think this might help: http://stackoverflow.com/questions/8378243/catch-scrolling-event-on-overflowhidden-element — RMSTOKES, Feb 13 '15 at 18:53

score 0 · Answer 1 · answered Feb 15 '15 at 02:06

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/

score 0 · Answer 2 · answered Feb 15 '15 at 09:31

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.

jQuery scroll() event doesn't propagate

2 Answers2