如何在智能手机上添加水平滚动条？

<div class="scroll-container">
  <div class="content">
    <!-- 添加内容 -->
  </div>
</div>

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

.content {
  width: 200%;
  /* 添加内容的宽度，确保超过容器宽度 */
}

/* 自定义滚动条样式 */
.scroll-container::-webkit-scrollbar {
  width: 8px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: #888;
}

.scroll-container::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

var container = document.querySelector('.scroll-container');
var startX, startY;

container.addEventListener('touchstart', function(e) {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

container.addEventListener('touchmove', function(e) {
  var deltaX = e.touches[0].clientX - startX;
  var deltaY = e.touches[0].clientY - startY;
  container.scrollLeft -= deltaX;
  container.scrollTop -= deltaY;
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

container.addEventListener('touchend', function(e) {
  // 手指离开屏幕时的处理
});