双垂直滚动条干扰懒加载行为问题排查

你的问题出在把滚动事件绑定到了全局window上，导致外层滚动条触发时也会执行逻辑。要实现仅内层滚动触发事件，只需把事件绑定到内层滚动容器元素上即可。

修改后的完整示例代码 #

HTML

<!-- 外层滚动容器 -->
<div class="outer-container">
  <!-- 内层滚动容器（懒加载内容的载体） -->
  <div class="inner-container">
    <div class="content-block">内容块1</div>
    <div class="content-block">内容块2</div>
    <div class="content-block">内容块3</div>
    <div class="content-block">内容块4</div>
    <div class="content-block">内容块5</div>
    <div class="content-block">内容块6</div>
    <div class="content-block">内容块7</div>
    <div class="content-block">内容块8</div>
  </div>
</div>

CSS

/* 外层容器：设置高度，出现滚动条 */
.outer-container {
  height: 100vh;
  overflow-y: auto;
  padding: 15px;
}

/* 内层容器：固定高度，内容超出时出现滚动条 */
.inner-container {
  height: 80vh;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
}

.content-block {
  height: 250px;
  margin: 10px 0;
  background-color: #f0f0f0;
  line-height: 250px;
  text-align: center;
}

JavaScript

// 获取内层滚动容器
const innerScrollBox = document.querySelector('.inner-container');

// 绑定内层容器的scroll事件
innerScrollBox.addEventListener('scroll', function(e) {
  // 阻止事件冒泡到外层容器（可选，防止外层也触发滚动逻辑）
  e.stopPropagation();
  
  // 获取内层滚动条的垂直滚动距离
  const innerScrollTop = this.scrollTop;
  console.log('内层滚动条坐标：', innerScrollTop);
  
  // 懒加载核心判断：滚动到容器底部时触发
  const isScrollToBottom = (this.scrollHeight - this.scrollTop) === this.clientHeight;
  if (isScrollToBottom) {
    console.log('内层滚动到底部，执行懒加载');
    // 这里写你的懒加载逻辑：比如请求更多数据、插入新内容
  }
});

关键要点 #

• 不要监听window的scroll事件，而是直接监听内层滚动容器的scroll事件
• 内层容器必须设置overflow-y: auto或scroll，同时设置固定高度/最大高度，确保内容超出时生成滚动条
• 用element.scrollTop获取内层容器的滚动距离，代替全局的scrollY
• 可选添加e.stopPropagation()，避免滚动事件冒泡到外层容器引发不必要的逻辑

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