如何将水平网格滚动到页面上的特定位置-所需的加载响应解决方案

<div id="container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
  <div class="grid-item">Item 7</div>
  <div class="grid-item">Item 8</div>
  <div class="grid-item">Item 9</div>
</div>

#container {
  width: 100%;
  height: 300px;
  overflow-x: scroll;
  white-space: nowrap;
}

.grid-item {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  margin-right: 10px;
}

var container = document.getElementById('container');
var gridItems = document.getElementsByClassName('grid-item');

container.addEventListener('scroll', function() {
  // 滚动事件处理逻辑
});

function scrollToItem(index) {
  if (index >= 0 && index < gridItems.length) {
    gridItems[index].scrollIntoView({ behavior: 'smooth' });
  }
}