jQuery scroll(）事件没有't传播

jQuery scroll() event doesn't propagate

本文关键字：传播 scroll 事件 jQuery      更新时间：2023-10-06

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

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

我对一个网站有问题。该网站有那些css规则：

html, body {
    overflow: hidden;
}
div#pageWrap {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

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

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

我的问题是我能正常地处理这个问题吗。我不能为每个有这个问题的网站更改插件的代码。可以做一些事情，比如使滚动事件传播或设置一些故障回复。任何关于这方面的想法都会有所帮助。

我不能保证这将适应所有边缘情况，但它应该能处理大多数边缘情况。

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/

我认为这个问题没有全局解决方案，但也许你会找到一些接近的解决方案。

在我看来，最接近的解决方案是找到具有（overflow="croll"）的div元素，它的宽度和高度非常接近窗口的宽度和宽度。

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

如果您还没有找到任何类似的div，那么您将处理jQuery（window）。

相关文章：