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

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。