javascript - SCSS 水平显示

Question

我的代码看起来像这样：

    <div class="container">
      <button class="leftbutton"> // these buttons control horizontal scrolling
      <ul class="scrollbar">
      <button class="rightbutton">
    </div>

我的造型是这样的：

.scrollbar{
  list-style: none;
  margin: 0;
  display: grid;
  grid-auto-columns: max-content;
  overflow: hidden;
  scroll-behavior: smooth;
  padding: 0;
}

.container{
  position: relative;
}

.leftButton {
  position: absolute;
  top: 0;
  left: 0;
}

.rightButton {
  position: absolute;
  top: 0;
  right: 0;
}

问题是滚动条的内容覆盖了左键。知道如何解决这个问题吗？谢谢！

标签： javascripthtmlcssreactjssass