当我滚动时，列表的图标状态恢复

<div class="container">
  <ul class="list">
    <li>
      <span class="icon">图标1</span>
      列表项1
    </li>
    <li>
      <span class="icon">图标2</span>
      列表项2
    </li>
    <li>
      <span class="icon">图标3</span>
      列表项3
    </li>
    ...
  </ul>
</div>

.container {
  height: 500px; /* 列表容器的高度 */
  overflow: auto; /* 滚动条自动出现 */
}

.list {
  padding: 0;
  list-style: none;
}

.icon {
  /* 默认状态的样式 */
}

.icon.active {
  /* 可见状态的样式 */
}

const container = document.querySelector('.container');
const icons = document.querySelectorAll('.icon');

function handleScroll() {
  const rect = container.getBoundingClientRect();
  const visible = rect.top < window.innerHeight && rect.bottom >= 0;

  if (visible) {
    icons.forEach(icon => icon.classList.add('active'));
  } else {
    icons.forEach(icon => icon.classList.remove('active'));
  }
}

container.addEventListener('scroll', handleScroll);