JS/JQuery技术问询：实现滚动到Div时内部元素按顺序显示

先说说你当前代码里的问题：

• 直接给div绑定scrollY事件是错误的，scrollY是滚动数值不是事件名
• 没有做顺序显示的逻辑，只是同时触发show()，没法实现依次出现的效果
• 每次滚动到阈值都会重复绑定事件，会导致逻辑混乱重复执行

下面给你一套可行的实现方案：

第一步：CSS基础设置 #

推荐用过渡动画替代生硬的display:none，视觉效果更流畅。如果非要用display也可以，后面代码会对应调整：

/* 初始状态：隐藏+左移偏移 */
.div .col img, gmp-map {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.5s ease;
}
/* 显示状态：恢复正常 */
.div .col img.show, gmp-map.show {
  opacity: 1;
  transform: translateX(0);
}

/* 如果坚持用display的话，替换上面的代码：
.div .col img, gmp-map {
  display: none;
}
*/

第二步：JavaScript/JQuery核心实现 #

核心逻辑是：判断目标Div进入视口后，按DOM顺序（也就是页面上从左到右的顺序）逐个延迟显示元素，且只触发一次动画。

// 标记动画是否已执行，防止滚动时重复触发
let hasAnimated = false;

$(window).on('scroll', function() {
  const targetDiv = $('.div');
  // 用视口判断替代固定scrollY，适配不同屏幕尺寸
  const divRect = targetDiv[0].getBoundingClientRect();
  const isDivInView = divRect.top <= window.innerHeight && divRect.bottom >= 0;

  if (isDivInView && !hasAnimated) {
    hasAnimated = true;
    // 获取需要依次显示的元素，DOM顺序就是页面从左到右的顺序
    const elements = targetDiv.find('.col img, gmp-map');
    
    // 逐个延迟显示，每300ms显示一个（可自行调整间隔）
    elements.each(function(index) {
      $(this).delay(index * 300).queue(function(next) {
        // 如果用display:none，就把下面这句改成$(this).show();
        $(this).addClass('show');
        next();
      });
    });
  }
});

关键细节说明 #

• 视口判断：用getBoundingClientRect()代替固定的scrollY >= 116，不管屏幕大小，只要Div进入视野就触发动画，更通用
• 顺序控制：利用元素的DOM顺序（页面上从左到右排列的元素在HTML里也是顺序排列的），通过index设置延迟时间，实现依次显示
• 防止重复触发：用hasAnimated变量标记动画状态，避免滚动时反复执行动画
• 过渡效果：用opacity+transform实现平滑的淡入滑入效果，比直接show()/hide()体验更好

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