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

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>

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