单击时在div内水平滚动(带按钮)

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 在这里放置需要滚动的内容 -->
  </div>
</div>
<button id="scroll-left-btn">向左滚动</button>
<button id="scroll-right-btn">向右滚动</button>

.scroll-container {
  width: 400px; /* 设置div的宽度 */
  overflow-x: scroll; /* 启用水平滚动功能 */
  white-space: nowrap; /* 防止内容换行 */
}

.scroll-content {
  display: inline-block; /* 将内容作为行内块元素显示 */
}

button {
  margin-top: 10px;
}

var scrollContainer = document.querySelector('.scroll-container');
var scrollContent = document.querySelector('.scroll-content');
var scrollLeftBtn = document.getElementById('scroll-left-btn');
var scrollRightBtn = document.getElementById('scroll-right-btn');

scrollLeftBtn.addEventListener('click', function() {
  scrollContainer.scrollLeft -= 100; // 向左滚动100像素
});

scrollRightBtn.addEventListener('click', function() {
  scrollContainer.scrollLeft += 100; // 向右滚动100像素
});