如何在jQuery中监听嵌套于fixed overflow:scroll div内元素的滚动事件

嘿，我来帮你搞定这个滚动监听的困扰！首先得抓住一个核心：滚动事件只会在设置了overflow: scroll/auto且内容超出容器的元素上触发，所以我们得先明确到底哪个容器才是真正的滚动主体，再针对性绑定监听逻辑。

情况1：div2本身是独立滚动容器 #

如果你的div2自己设置了固定高度（或最大高度）+ overflow: scroll/auto，那它就是独立的滚动容器，直接监听它的scroll事件即可：

HTML示例 #

<div id="div1" style="position: fixed; height: 100vh; overflow: scroll; width: 100%;">
  <!-- 填充内容让div1也能滚动 -->
  <div style="height: 200vh; padding: 20px;">
    <div id="div2" style="height: 300px; overflow: scroll; border: 1px solid #ddd;">
      <!-- div2的长内容，确保能触发滚动 -->
      <div style="height: 600px; background: linear-gradient(#eee, #ccc);">
        这是div2的滚动内容，往下滑试试～
      </div>
    </div>
  </div>
</div>

jQuery代码 #

// 直接监听div2的scroll事件
$('#div2').on('scroll', function() {
  // 获取div2的滚动距离
  const scrollTop = $(this).scrollTop();
  console.log('div2滚动了，滚动距离：', scrollTop);
  
  // 这里放入你要执行的指定命令
  // 比如：
  // if (scrollTop > 100) {
  //   alert('div2滚动超过100px啦！');
  // }
});

情况2：div2是div1滚动内容的一部分 #

如果div2没有设置滚动属性，只是div1滚动内容里的一个元素，那滚动事件实际是在div1上触发的。这时候我们需要监听div1的滚动，再通过位置计算判断div2的状态：

HTML示例 #

<div id="div1" style="position: fixed; height: 100vh; overflow: scroll; width: 100%;">
  <!-- 足够长的内容让div1可滚动 -->
  <div style="height: 200vh;">
    <div id="div2" style="height: 400px; margin-top: 600px; border: 1px solid #ddd;">
      这是div2，当它进入div1的可视区域时触发命令
    </div>
  </div>
</div>

jQuery代码 #

// 监听div1的滚动事件
$('#div1').on('scroll', function() {
  const $div1 = $(this);
  const $div2 = $('#div2');
  
  // 计算div2相对于div1的顶部偏移量
  const div2RelativeTop = $div2.offset().top - $div1.offset().top;
  const div1ScrollTop = $div1.scrollTop();
  const div1Height = $div1.height();
  const div2Height = $div2.outerHeight();
  
  // 判断div2是否进入div1的可视区域（可根据需求调整条件）
  if (div1ScrollTop + div1Height > div2RelativeTop && div1ScrollTop < div2RelativeTop + div2Height) {
    console.log('div2现在在div1的可视范围内，执行命令！');
    // 这里放入你的指定命令
  }
});

常见问题排查 #

1. jQuery引入问题：确保页面已正确引入jQuery，若有冲突可尝试用jQuery代替$。
2. 元素选择器错误：检查div1、div2的ID拼写是否正确，避免重复ID。
3. 动态生成元素：如果div2是JS动态添加的，要在元素生成后再绑定scroll事件，或用MutationObserver监听元素添加后再绑定。
4. 滚动事件不冒泡：scroll事件不支持事件委托，动态生成的滚动元素必须直接绑定事件到自身。

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