fixed定位且overflow:scroll的div下jQuery滚动事件失效问题及解决

疑问1：原生JS的document.querySelectorAll("*")能监听滚动，为何jQuery的$("*").on("scroll")不行？ #

核心原因有两点：

• DOM加载时机不匹配：你的jQuery代码写在<head>标签内，此时<body>中的元素（包括触发滚动的容器#b）还未完成渲染，$("*")只能选中<head>里的<style>、<script>等元素，这些元素不会触发scroll事件。而原生JS代码放在<body>末尾，此时所有DOM元素都已加载完成，document.querySelectorAll("*")能选中包括#b在内的所有元素，自然能监听到滚动行为。
• window选择器写法错误：代码里的$("window").on("scroll")是错误用法，window不是CSS选择器，jQuery会尝试寻找<window>标签，显然不存在。正确写法是$(window).on("scroll")，不过在当前布局下window本身不会产生滚动（内容都在fixed的滚动容器内），所以这个监听本来也不会触发。

疑问2：如何在文件开头用jQuery实现滚动检测？ #

推荐两种可靠方案：

方案1：等待DOM加载完成后绑定事件 #

将jQuery代码包裹在$(document).ready()回调中，确保所有DOM元素渲染完成后再绑定事件，可选择监听所有元素或直接定位滚动容器：

$(document).ready(function() {
    // 监听所有元素的scroll事件
    $("*").on("scroll", function(e) {
        console.log("滚动触发自：", this.id);
    });

    // 更高效的方式：直接监听目标滚动容器#b
    $("#b").on("scroll", function() {
        console.log("容器#b发生滚动");
    });
});

方案2：使用事件委托 #

利用事件委托在document上监听scroll事件，无需等待DOM完全加载也能生效，且性能更优（不用给每个元素单独绑定）：

$(document).ready(function() {
    $(document).on("scroll", "*", function(e) {
        console.log("滚动触发自：", this.id);
    });
});

注意：当前布局下window和body不会产生滚动，所有滚动行为都发生在fixed定位且设置了overflow:scroll的#b容器内，因此直接监听该容器是最精准的方式。

内容的提问来源于stack exchange，提问作者user20417316