如何让下一个/上一个按钮在滚动条上工作？

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

.scroll-container {
  overflow: auto;
  height: 300px; /* 设置容器的高度 */
}

<div class="scroll-container">
  <p>内容1</p>
  <p>内容2</p>
  <p>内容3</p>
  <!-- 添加更多内容 -->
</div>

<div class="scroll-container">
  <p>内容1</p>
  <p>内容2</p>
  <p>内容3</p>
  <!-- 添加更多内容 -->
</div>

<button id="prev-btn">上一个</button>
<button id="next-btn">下一个</button>

<script>
  const prevBtn = document.getElementById('prev-btn');
  const nextBtn = document.getElementById('next-btn');
  const container = document.querySelector('.scroll-container');

  prevBtn.addEventListener('click', () => {
    container.scrollBy(0, -100); // 向上滚动100像素
  });

  nextBtn.addEventListener('click', () => {
    container.scrollBy(0, 100); // 向下滚动100像素
  });
</script>