Question

我有一个wordpress插件，在滚动时显示弹出窗口。所以我有这样的代码：

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

我有一个网站的问题。该网站有这些css规则：

html, body {
    overflow: hidden;
}

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

因此滚动事件不会在窗口上触发，我的弹出窗口也不起作用。所以在这种情况下我应该在#pageWrap div上设置滚动事件而不是在窗口上，因为滚动事件不会传播：

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

我的问题是我可以处理这个恐怖的问题。我无法为我遇到此问题的每个网站更改插件的代码。可以做一些像make scroll事件传播或设置一些故障恢复。对此有任何想法都会有所帮助。

Answer 1

我无法承诺这将适应所有边缘情况，但它应该照顾大部分情况。

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/

Answer 2

我认为这个问题不存在全球解决方案，但也许您会找到一些紧密的解决方案。

我认为最接近的解决方案是找到具有（overflow ='scroll'）的div元素，它的宽度和高度非常接近窗口的宽度和高度。

如果您发现了多个这样的div，那么您需要处理DOM中最深的div。

如果你还没有找到任何这样的div，那么你就会处理jQuery（窗口）。

jQuery scroll（）事件没有传播

2 个答案: