Bootstrap模态框内指定Div滚动事件失效问题求助

嘿，我来帮你搞定这个滚动事件的问题！你遇到的核心问题是滚动事件只会在实际产生滚动条的元素上触发，你之前监听的.connection_list_tab大概率不是那个带滚动条的容器，所以事件没反应。

第一步：找到真正的滚动容器 #

先检查你的CSS，看看以下哪个元素设置了overflow-y: auto或overflow: scroll，同时有固定/最大高度（比如max-height）：

• .modal-body（Bootstrap模态框的默认内容区）
• .choose-my-accnt-body（你的自定义容器）
• .connection_list_tab（你之前监听的列表）

通常情况下，Bootstrap的.modal-body默认不会自动出现滚动条，所以大概率是.choose-my-accnt-body需要承担滚动容器的角色。

第二步：绑定正确的滚动事件 #

情况1：直接绑定（元素已存在） #

如果滚动容器是.choose-my-accnt-body，直接给它绑定滚动事件：

$('.choose-my-accnt-body').scroll(function(event) {
  console.log('滚动触发啦！');
});

情况2：事件委托（适合动态渲染的元素） #

如果你的列表是动态加载的，或者模态框是动态生成的，用事件委托更可靠：

$('#myModal').on('scroll', '.choose-my-accnt-body', function(event) {
  console.log('滚动触发啦！');
});

关键：等模态框完全显示后再绑定 #

Bootstrap模态框有自己的生命周期，建议在模态框完全显示（shown.bs.modal事件）后再绑定滚动事件，避免元素尺寸还没计算好的问题：

$('#myModal').on('shown.bs.modal', function() {
  // 找到模态框内的滚动容器
  const scrollContainer = $(this).find('.choose-my-accnt-body');
  scrollContainer.scroll(function() {
    console.log('滚动触发啦！');
  });
});

第三步：确保滚动容器的CSS正确 #

如果还没生效，检查滚动容器的CSS是否设置了高度限制和溢出属性：

.choose-my-accnt-body {
  max-height: 400px; /* 根据你的页面需求调整高度 */
  overflow-y: auto; /* 垂直方向超出时显示滚动条 */
}

如果确实是.connection_list_tab需要滚动，那给它加上同样的CSS属性，然后把事件绑定到它上面就行。

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