如何在滚动时显示每个图像的计数

<div id="image-container">
  <img src="image1.jpg" data-img-id="1" alt="Image 1">
  <img src="image2.jpg" data-img-id="2" alt="Image 2">
  <img src="image3.jpg" data-img-id="3" alt="Image 3">
  <!-- 更多图像... -->
</div>

#image-container {
  width: 400px;
  height: 200px;
  overflow: scroll;
  position: relative;
}

.image-count {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

var imageContainer = document.getElementById('image-container');

imageContainer.addEventListener('scroll', function() {
  var images = imageContainer.getElementsByTagName('img');
  var containerTop = imageContainer.getBoundingClientRect().top;
  var containerHeight = imageContainer.offsetHeight;

  for (var i = 0; i < images.length; i++) {
    var image = images[i];
    var imageRect = image.getBoundingClientRect();
    var imageTop = imageRect.top - containerTop;
    var imageBottom = imageTop + imageRect.height;

    if (imageBottom >= 0 && imageTop <= containerHeight) {
      // 图像在可见范围内
      var imgId = image.getAttribute('data-img-id');
      var countElement = document.createElement('span');
      countElement.className = 'image-count';
      countElement.innerText = 'Image ' + imgId;
      imageContainer.appendChild(countElement);
    } else {
      // 图像不在可见范围内
      var countElements = imageContainer.getElementsByClassName('image-count');
      for (var j = 0; j < countElements.length; j++) {
        imageContainer.removeChild(countElements[j]);
      }
    }
  }
});