长列表滚动,中间项高亮

HTML:

<div class="list-container">
  <ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <!-- 添加更多项 -->
  </ul>
</div>

CSS:

.list-container {
  height: 200px;
  overflow-y: scroll;
}

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

.list li {
  padding: 10px;
  background-color: #f2f2f2;
  margin-bottom: 5px;
}

.list li.active {
  background-color: #ffcc00;
}

JavaScript:

document.querySelector('.list-container').addEventListener('scroll', function() {
  var container = this;
  var items = container.querySelectorAll('.list li');
  var containerHeight = container.clientHeight;
  var scrollPosition = container.scrollTop;

  items.forEach(function(item) {
    var itemTop = item.offsetTop;
    var itemHeight = item.clientHeight;

    if (itemTop < scrollPosition + containerHeight / 2 && itemTop + itemHeight > scrollPosition + containerHeight / 2) {
      item.classList.add('active');
    } else {
      item.classList.remove('active');
    }
  });
});

这段代码会监听滚动事件，然后根据滚动位置来确定哪个项在可视区的中间位置，然后将该项添加高亮状态。