单击时如何在显示屏内滚动水平滚动视图中的项目？

.container {
  width: 100%;
  height: 200px;
  overflow-x: scroll;
}

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
  <!-- 其他项目 -->
</div>

.item {
  width: 200px;
  height: 200px;
  /* 其他样式属性 */
}

var container = document.querySelector('.container');
container.addEventListener('click', function() {
  var scrollLeft = container.scrollLeft; // 当前的滚动位置
  var scrollWidth = container.scrollWidth; // 可滚动的总宽度
  var clientWidth = container.clientWidth; // 可见区域的宽度
  var maxScrollLeft = scrollWidth - clientWidth; // 最大的滚动位置
  var scrollStep = 200; // 每次滚动的步长
  var targetScrollLeft = scrollLeft + scrollStep; // 目标滚动位置
  
  if (targetScrollLeft > maxScrollLeft) {
    targetScrollLeft = maxScrollLeft;
  }
  
  container.scrollTo({
    left: targetScrollLeft,
    behavior: 'smooth' // 平滑滚动
  });
});