我可以自定义滚动条的水平位置吗？

Question

我正在使用表组件。内容的高度大于表格的高度。所以我需要一个滚动条。

但表组件来自开源框架，即ant-design。所以我无法直接修改代码。

在下图中，我想将滚动条移动到表格中，即将滚动条向左移动一点。

::-webkit-scrollbar {
    position: relative;
    left:-10px;
}

我用了position这个属性。但它没有用。也没有搜索谷歌。

下面是codepen的代码示例：https://codepen.io/anon/pen/eXqqqb那么，滚动条稍微向左移动的解决方案是什么？

Answer 1

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: grey; 
  border-radius: 10px;
}
.list_container {
    overflow:auto;
    height: 50px;
    width: 40px;
  }

<div class="list_container">
  <div class="item_direction">1</div>
  <div class="item_direction">2</div>
  <div class="item_direction">3</div>
  <div class="item_direction">4</div>
  <div class="item_direction">5</div>
  <div class="item_direction">6</div>
  <div class="item_direction">7</div>
  <div class="item_direction">8</div>
  <div class="item_direction">9</div>
  <div class="item_direction">10</div>
  <div class="item_direction">11</div>
  <div class="item_direction">12</div>
</div>

所以我编辑了我的答案。这适用于div。