使用javascript控制水平滚动

<div class="container">
  <div class="content">
    <!-- 水平滚动的内容 -->
  </div>
</div>

.container {
  width: 500px;  /* 滚动容器的宽度 */
  overflow-x: auto;  /* 水平滚动 */
  white-space: nowrap;  /* 水平内容不换行 */
}

.content {
  width: 1000px;  /* 内容宽度超过容器宽度，触发水平滚动 */
}

window.addEventListener('load', function() {
  var container = document.querySelector('.container');
  var content = document.querySelector('.content');

  container.addEventListener('scroll', function() {
    console.log('水平滚动位置：', container.scrollLeft);
  });

  // 通过修改scrollLeft属性实现水平滚动
  container.scrollLeft = 200;  // 滚动到200px的位置
});