如何创建包含多个可点击按钮的水平滚动视图？

<div class="scroll-view">
  <ul>
    <li><button>按钮1</button></li>
    <li><button>按钮2</button></li>
    <li><button>按钮3</button></li>
    <li><button>按钮4</button></li>
    <li><button>按钮5</button></li>
    <li><button>按钮6</button></li>
    <!-- 添加更多按钮 -->
  </ul>
</div>

.scroll-view {
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}

.scroll-view ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.scroll-view li {
  display: inline-block;
  margin-right: 10px;
}

.scroll-view button {
  padding: 5px 10px;
  background-color: #ccc;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.scroll-view button:hover {
  background-color: #aaa;
}

const buttons = document.querySelectorAll('.scroll-view button');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    // 执行按钮点击后的操作
  });
});