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

要实现在div内水平滚动（带按钮）的效果，可以采用以下方法：

使用CSS属性overflow-x: scroll;来启用div的水平滚动功能。
创建左右滚动按钮，并使用JavaScript监听按钮的点击事件。
在按钮的点击事件中，使用JavaScript获取div的滚动距离，并根据需要滚动的宽度进行滚动操作。

下面是一个完整的示例代码：

HTML部分：

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

CSS部分：

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

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

button {
  margin-top: 10px;
}

JavaScript部分：

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像素
});

通过以上代码，我们创建了一个具有水平滚动功能的div，其中包括左右滚动按钮。点击按钮时，div会按照指定的像素数水平滚动。

这种实现方式适用于需要在一定宽度范围内展示横向内容的情况，比如图片展示、横向列表等。

腾讯云相关产品推荐：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm