jQuery滚动事件（scroll()）不会冒泡传播

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
});

我的问题是我能否动态处理它。我不能为我遇到这个问题的每个站点更改插件代码。是否有可能做一些类似于使滚动事件传播或设置某些回退的事情。对此的任何想法都将很有帮助。

- masacenje

---

#pageWrap和window是唯一的选项吗？没有其他需要处理的选项吗？ - Baraa Al-Tabbaa

不，这只是我遇到问题的一个例子。任何其他包装器都可以设置为overflow: scroll; 关键是当用户滚动页面的80％时，我需要显示我的弹出窗口。因此，当存在像这样的CSS规则时，滚动不适用于窗口，因此我需要动态查找哪个元素正在滚动或设置滚动以传播或任何其他解决方案，以便在滚动80％后显示我的弹出窗口。 - masacenje

为什么在允许用户滚动的情况下，HTML和BODY元素上会有“overflow：hidden”？最坏的情况只需在附加滚动事件之前动态更改溢出值，如下所示：$（'html，body'）.css（'overflow'，'auto'）。 - istos

overflow: hidden 在 html 和 body 上并不是由我设置的。它是在使用我的插件的客户网站上设置的，而我的插件已经在窗口上附加了滚动事件。因此，我需要在我的插件中以编程方式处理这种情况。如果我将 'overflow'、'auto' 设置为 body 和 html，直到我从包装 div 中删除 overflow: 'scroll'，它仍然无法正常工作。是否有一个事件在滚动到窗口底部时触发？ - masacenje

我认为这可能会有所帮助：https://dev59.com/YGsy5IYBdhLWcg3wsQJj - RMSTOKES

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/

- hopkins-matt

Answer 2

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

我想到的接近解决方案是找到具有(overflow='scroll')属性且宽度和高度非常接近窗口宽度和高度的div元素。

如果你找到了多个类似的div，则需要处理DOM中最深层的div。

如果你没有找到任何类似的div，则需要处理jQuery(window)。

- Baraa Al-Tabbaa