如何让项目按顺序在滚动条上淡入？

<div class="fade-in-item">
  <!-- 项目内容 -->
</div>

.fade-in-item {
  opacity: 0; /* 初始状态为透明 */
  animation: fade-in 1s ease-in-out forwards; /* 淡入动画效果 */
}

@keyframes fade-in {
  0% {
    opacity: 0; /* 初始状态为透明 */
  }
  100% {
    opacity: 1; /* 最终状态为完全显示 */
  }
}

window.addEventListener('scroll', function() {
  var fadeItems = document.querySelectorAll('.fade-in-item');
  
  for (var i = 0; i < fadeItems.length; i++) {
    var item = fadeItems[i];
    var itemTop = item.getBoundingClientRect().top;
    var windowHeight = window.innerHeight;
    
    if (itemTop < windowHeight) {
      item.classList.add('fade-in');
    }
  }
});