[SOLVED] Change the width of horizontal scroll bar

Change the width of horizontal scroll bar

How can I change the width of horizontal scroll bar. I want to reduce the width than the div size. (do not want 100% width)

Solution

This can be done using a customisation of the end and start scrollbar track pieces.

Effectively, you make the start and end piece invisible and set a large margin on it, and it will reduce the width of the available scrollbar to the size you want.

You can modify the position and width by changing the margins on the start and end piece.

See the following demonstration:

.container {
  width: 300px;
}

.inner {
  display: flex;
  overflow-x: scroll;
}

.inner::-webkit-scrollbar {
  height: 5px;
}
  
.inner::-webkit-scrollbar-thumb {
  background-color: blue;
}

.inner::-webkit-scrollbar-track-piece:end {
  margin-right: 50px; 
}

.inner::-webkit-scrollbar-track-piece:start {
  margin-left: 50px;
}

<div class="container">
  <div class="inner">
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
  </div>
</div>