0

I am trying to get the handle for the scrolebar to remain a fixed height so that it is a 30px by 30px square, but the height command only makes it bigger than the default size and setting the height any smaller than this has no effect.

::-webkit-scrollbar {
    width: 30px;
}

::-webkit-scrollbar-track {
    background-color: green;
}

::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: red;
}
<div id="container">
  <ul id="list1">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>
Liam
  • 19
  • 1
  • 5
  • Does this answer your question? [Can't apply width and height to -webkit-scrollbar using CSS](https://stackoverflow.com/questions/7700859/cant-apply-width-and-height-to-webkit-scrollbar-using-css) – Cypherjac Jun 12 '20 at 05:57
  • No that refers to the scrollbar as a whole, I am looking to change the handles size. – Liam Jun 12 '20 at 06:31
  • If you have actually read the info in the link, you would know that for a vertical scrollbar, you cannot affect the height of the `::-webkit-scrollbar-thumb`, and for a horizontal scrollbar you can't change the width ... that's because the browser checks the length of the content and assigns the "thumb" a height based on the height of the window -- for a vertical scrollbar, and for a horizontal one, based on the width of the window, or the element that has the horizontal scrollbar – Cypherjac Jun 12 '20 at 06:51
  • I have seen this done before i just don't understand how they are going about it. http://jsfiddle.net/fkv4zm5x/ (adapted from: https://stackoverflow.com/questions/41598048/css-scroll-thumb-fixed-circle-size) – Liam Jun 12 '20 at 07:07

1 Answers1

1

By the way I never knew that was possible, this is also a learning process for me :}

#list1 {
  overflow-y: scroll;
  /*  Setting overflow-y does the trick here, since the scrollbar is native
  to the unordered list only -- as you will see below */
  height: 100px;
  /*  Based on the fiddle, this height determines the state of the scrollbar  */
}

/* Increasing specifity(using #list1), ensures the scrollbar sytling affects
the area within the #list1 only making it native to those elements only */
/* It would still work either way but its best to contain it for the specific element */
#list1::-webkit-scrollbar-track {
  background-color: steelblue;
  width: 30px;
}

#list1::-webkit-scrollbar {
  width: 30px;
  background-color: green;
}

#list1::-webkit-scrollbar-thumb {
  background-color: red;
  height: 30px;
}
<div id="container">
  <ul id="list1">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>

Also note that Stackoverflow's "snippet view" area has a max height set to it so it might affect the results here, that's why you see the height is set to 100px so it can live within that snippet area ... since the scrollbar is only native to the #list div block, it requires a height to be assigned to it and you get the results.

Try it in a different workspace, like your own editor then add more elements in the unordered list and see whether it still works

Cypherjac
  • 859
  • 8
  • 17
  • Looking into this I think you first answer was right and the only way to get the scroll bar to shrink is to shrink the whole division, which is not possible in my case, as increasing the size overwrites the height parameter. – Liam Jun 12 '20 at 08:02