如何实现滚动到子Div时固定并添加内部滚动动画（JS/jQuery）

我需要制作网站中部的一个模块，实现子Div滚动触发动画的效果。目前已完成卡片点击切换功能，但改为滚动触发后，两段JS代码均无法生效，连alert都没弹出。

之前代码的问题 #

1. 滚动事件触发条件不满足：onscroll事件仅在元素自身出现滚动条时才会触发——即元素需设置overflow: auto/scroll，且内容高度超过容器高度。你的.cards容器大概率未配置滚动相关样式，导致事件无法触发。
2. 选择器不匹配：第二段代码用document.querySelector('.cards-main-div')选择元素，但HTML中对应的是class="cards"的div，选择器错误导致无法绑定事件。

解决方案 #

1. 给容器设置滚动条件

先确保目标容器具备滚动能力：

.cards {
  height: 400px; /* 按需设置固定高度 */
  overflow-y: auto; /* 垂直内容超出时显示滚动条 */
}

2. 滚动触发动画的两种场景代码

场景1：容器自身滚动触发动画

当子Div内部滚动时触发切换：

<div class="cards" id="cards-container">
  <!-- 放置超出容器高度的内容，比如多个卡片 -->
  <div class="card-item">卡片1</div>
  <div class="card-item">卡片2</div>
  <div class="card-item">卡片3</div>
  <!-- 更多卡片... -->
</div>
<div class="card-info-div" id="card-info-div" style="display: none;">
  卡片详情内容
</div>

const cardsContainer = document.getElementById('cards-container');
const cardInfoDiv = document.getElementById('card-info-div');
const cardsMainDiv = document.getElementById('platform-cards');

cardsContainer.addEventListener('scroll', () => {
  // 可根据滚动距离判断触发时机，比如滚动超过50px时切换
  if (cardsContainer.scrollTop > 50) {
    cardsMainDiv.style.backgroundColor = 'black';
    cardsMainDiv.style.display = 'none';
    cardInfoDiv.style.display = 'block';
  } else {
    // 滚动回顶部时恢复原状态
    cardsMainDiv.style.backgroundColor = '';
    cardsMainDiv.style.display = 'block';
    cardInfoDiv.style.display = 'none';
  }
});

场景2：页面滚动到模块位置触发动画

当页面滚动，模块进入视口时触发动画：

const cardsSection = document.querySelector('.cards');
const cardInfoDiv = document.getElementById('card-info-div');
const cardsMainDiv = document.getElementById('platform-cards');

// 添加节流函数优化性能
function throttle(func, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  const rect = cardsSection.getBoundingClientRect();
  // 判断模块是否进入视口（例：顶部进入视口一半）
  if (rect.top < window.innerHeight / 2 && rect.bottom > 0) {
    cardsMainDiv.style.backgroundColor = 'black';
    cardsMainDiv.style.display = 'none';
    cardInfoDiv.style.display = 'block';
  } else {
    // 模块离开视口时恢复（可选）
    cardsMainDiv.style.backgroundColor = '';
    cardsMainDiv.style.display = 'block';
    cardInfoDiv.style.display = 'none';
  }
}, 200));

3. 注意事项

• 确保元素ID、类名与选择器完全匹配，避免拼写错误
• 页面滚动触发场景建议添加节流函数，减少事件触发频率，优化性能

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