Can I customize the horizontal position of scroll bar?

Question

I'm using a table component. The content's height is larger than the table's height. So I need a scroll bar.

But the table component is from an open-source framework, ant-design. So I can not modify the code directly.

In the following picture, I want to move the scroll bar into the table, that is, move the scroll bar to left a little.

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

I used the property position . But it didn't work. Searching google neither.

Here is an code example of codepen : https://codepen.io/anon/pen/eXqqqb So, what's the solution for moving the scroll bar a little left?

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> 

So i edited my answer. this works for divs.