Change Scrollbar Height

Change scrollbar height

It is possible.
The first thing you need to know is the structure of a scroll bar. Here I reference a picture from css-tricks.

Sample Image

to achieve what you want, you need:

change where 5(scrollbar thumb) start to scroll and stop scrolling
fake a scroll track instead of 3.

.page {   position: relative;  width: 100px;   height: 200px;}
.content {   width: 100%;}
.wrapper {  position: relative;  width: 100%;   height: 100%;   padding: 0;   overflow-y: scroll;   overflow-x: hidden;   border: 1px solid #ddd;}
.page::after {   content:'';  position: absolute;  z-index: -1;  height: calc(100% - 20px);  top: 10px;  right: -1px;  width: 5px;  background: #666;}
.wrapper::-webkit-scrollbar {    display: block;    width: 5px;}.wrapper::-webkit-scrollbar-track {    background: transparent;}    .wrapper::-webkit-scrollbar-thumb {    background-color: red;    border-right: none;    border-left: none;}
.wrapper::-webkit-scrollbar-track-piece:end {    background: transparent;    margin-bottom: 10px; }
.wrapper::-webkit-scrollbar-track-piece:start {    background: transparent;    margin-top: 10px;}

<div class="page"><div class="wrapper"><div class="content">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/></div></div></div>

How to change a scroll bar height?

If you want to change the height based on your preference you can use an arbitrary value like h-[120px] or h-[30rem] or h-[180px] for example. you can change the value inside the square brackets according to the height you want.

You can learn more about arbitrary values in the tailwind documentation here:
https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

How can I change the thumb height of Scrollbar?

It's not supported on your browser then:

Ask this:

Are you on firefox?

Does the scrollbar change in stackoverflow: Change scrollbar height

(Do the answers scrollbars change?)

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
h1 {
  font-size: 1000px;
}

<h1>Test</h1>

Change the scroll bar width, color and height of specific container with overflow property

.container{
  height:100px;
  overflow:auto;
  display: block;
  }
  
  .container::-webkit-scrollbar{
      width:5px;
      background-color:#000;
      }
      
  .container::-webkit-scrollbar-thumb{
    background:red;
    border-radius:5px;
  }

<div style="height:800px">

  <div class="container">
      <p>A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.</p>
  </div>

</div>

Scrollbar thumb height in css

I don't think so, the height of the thumb is based in the size of content, you can change the width inside the ::-webkit-scrollbar but the height will always be based on the content.

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

css-tricks

Sample Image

Source

Fixed height for scrollbar handle

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 affectsthe 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>

Change Scrollbar Height