颤动网:如何在步进器形式中进行水平滚动？

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

<button id="scrollLeftButton">向左滚动</button>
<button id="scrollRightButton">向右滚动</button>

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.content {
  width: 1000px; /* 大于容器宽度 */
  position: absolute;
  left: 0;
  transition: left 0.3s ease; /* 平滑滚动效果 */
}

button {
  margin-top: 10px;
}

var container = document.querySelector('.container');
var content = document.querySelector('.content');
var scrollLeftButton = document.getElementById('scrollLeftButton');
var scrollRightButton = document.getElementById('scrollRightButton');

scrollLeftButton.addEventListener('click', function() {
  content.style.left = parseInt(content.style.left) + 100 + 'px';
});

scrollRightButton.addEventListener('click', function() {
  content.style.left = parseInt(content.style.left) - 100 + 'px';
});