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

当滚动时，列表的图标状态恢复，这是一个前端开发中常见的交互效果。在实现这个效果时，可以通过监听滚动事件来判断列表是否处于可见状态，然后根据列表的状态来改变图标的样式。

具体实现步骤如下：

使用HTML和CSS创建一个包含列表和图标的页面结构。可以使用无序列表（<ul>）来创建列表，每个列表项（<li>）包含一个图标。
使用JavaScript监听滚动事件。可以使用addEventListener函数来监听scroll事件。
在滚动事件的处理函数中，判断列表是否处于可见状态。可以通过获取列表容器的位置和窗口的滚动位置来判断列表是否可见。如果列表在可见区域内，则将图标的状态恢复；否则，将图标的状态改变为默认状态。
根据图标的状态改变其样式。可以使用CSS类来定义不同状态下的样式，然后使用JavaScript通过classList属性来添加或移除这些类。

下面是一个示例代码：

HTML：

<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>

CSS：

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

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

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

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

JavaScript：

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);

这样，当滚动时，列表的图标状态就会根据列表的可见性来进行恢复或改变。你可以根据需要修改样式和其他交互逻辑。