反应。如何实现滚动到活动列表项？

<div id="scrollContainer" style="overflow: auto; height: 300px;">
  <ul id="activityList">
    <li class="activityItem">活动1</li>
    <li class="activityItem">活动2</li>
    <li class="activityItem">活动3</li>
    <li class="activityItem">活动4</li>
    <li class="activityItem">活动5</li>
    <!-- 更多活动列表项 -->
  </ul>
</div>

// 获取滚动容器和活动列表项
var scrollContainer = document.getElementById("scrollContainer");
var activityItems = document.getElementsByClassName("activityItem");

// 监听滚动事件
scrollContainer.addEventListener("scroll", function() {
  // 遍历活动列表项
  for (var i = 0; i < activityItems.length; i++) {
    var item = activityItems[i];
    // 判断活动列表项是否在可视区域内
    if (isElementInViewport(item)) {
      // 滚动到该活动列表项
      item.scrollIntoView();
      break;
    }
  }
});

// 判断元素是否在可视区域内的函数
function isElementInViewport(element) {
  var rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}