如何通过滚动一项来水平滚动列表视图中的其他项？

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

.list-container {
  width: 300px;
  overflow: hidden;
}

.list-items {
  width: 1000px; /* 宽度足够容纳所有列表项 */
  display: flex;
}

.list-item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background-color: #ccc;
}

const container = document.querySelector('.list-container');
const items = document.querySelector('.list-items');

container.addEventListener('scroll', function() {
  items.scrollLeft = container.scrollLeft;
});