CODEWITHSUNDEEP
htmlcsswebkitheightscrollbar
Liam
Liam

Reputation: 51

Fixed height for scrollbar handle

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>

Upvotes: 0

Views: 4047

Answers (1)

Cypherjac
Cypherjac

Reputation: 879

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

Upvotes: 1

Related Questions