jQuery scroll() 事件不传播答案

【问题标题】：jQuery scroll() event doesn't propagatejQuery scroll() 事件不传播
【发布时间】：2015-04-14 00:03:54
【问题描述】：

我有一个 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
});

我的问题是我可以处理这个问题吗？我无法为遇到此问题的每个站点更改插件代码。可以做一些事情，比如让滚动事件传播或设置一些故障回复。对此的任何想法都会有所帮助。

【问题讨论】：

#pageWrap 和 window 是唯一的选择吗？没有其他选择需要处理？
不，这只是我遇到问题的一个例子。任何其他包装器都可以设置为溢出：滚动；关键是当用户滚动 80% 的页面时我需要显示我的弹出窗口。因此，当有像这样的 css 规则时，滚动在窗口上不起作用，所以我需要动态查找正在滚动的元素或设置滚动传播或任何其他解决方案，只是为了在 80% 滚动后显示我的弹出窗口
当意图允许用户滚动时，为什么在 html 和 body 元素上有一个overflow: hidden？最坏的情况只是像这样动态更改溢出值：$('html, body').css('overflow', 'auto') 在附加滚动事件之前。
溢出：隐藏在 html & body 上不是我设置的。它设置在使用我的插件的客户站点上，并且我的插件在窗口上附加了事件滚动。所以我需要在我的插件中以编程方式处理这种情况。如果我将 'overflow'、'auto' 设置为 body 和 html，它仍然无法工作，直到我从 wrap div 中删除溢出：'scroll'。滚动到达窗口底部或其他东西时是否会触发事件。
我认为这可能会有所帮助：stackoverflow.com/questions/8378243/…

标签： javascript jquery html css wordpress

【解决方案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/

【讨论】：

【解决方案2】：

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

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

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

如果你还没有找到任何这样的 div，那么你可以使用 jQuery(window) 来代替。

【讨论】：