How to manage the length:-webkit-scrollbar-thumb?

Question

How to manage the length:-webkit-scrollbar-thumb?

Webkit supports CSS3 scrolling bar styling. And everything would be fine, but for some reason I can't change the length of the slider. I tried both width and height - nothing helps. Anyone have any ideas?

#parent {
  width: 300px;
  height: 300px;
  padding: 20px;
  overflow: auto;
}

#child {
  width: 250px;
  height: 1000px;
  margin: 0 auto;
  border: 2px solid #8c1b21;
}

#parent::-webkit-scrollbar {
    width: 15px;
    background-color: #B79889;
    border-radius: 5px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#parent::-webkit-scrollbar-thumb {
    background-color: #8c1b21;
    border-radius: 5px;
}

<div id="parent">
  <div id="child"></div>
</div>

2

html css scrollbar webkit

Author: humster_spb, 2017-07-20

Source

1 answers

score 1 · Answer 1

If the task is to make the slider already scrollbar-you can set its border in the color of the scrollbar.

And the length of the slider is calculated by the browser based on the amount of content and the size of the block itself.

#parent {
  width: 300px;
  height: 300px;
  padding: 20px;
  overflow: auto;
}

#child {
  width: 250px;
  height: 1000px;
  margin: 0 auto;
  border: 2px solid #8c1b21;
}

#parent::-webkit-scrollbar {
  width: 15px;
  background-color: #B79889;
  border-radius: 5px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}


#parent::-webkit-scrollbar-thumb {
  width: 15px;
  border: 3px solid #B79889;
  background-color: #8c1b21;
  border-radius: 5px;
}

<div id="parent">
  <div id="child"></div>
</div>