How to Set The Width of Webkit-Scrollbar-Thumb

Unable to set the width of webkit-scrollbar-thumb

You are correct that WebKit ignores the width declaration on the scrollbar-thumb. It also ignores it on the track.

The problem with using a border is that it draws the border within the thumb, so if you just make the colour transparent, it will not work.

The solution is to change where the background is attached. By default the background extends under the border, as mentioned. You can use the background-clip property to change this, so that it only extends to the edge of the padding box instead. Then you just need to make a 3px transparent border, then Bob’s your uncle:

::-webkit-scrollbar-thumb {
    background-color: #818B99;
    border: 3px solid transparent;
    border-radius: 9px;
    background-clip: content-box;
}

See http://jsfiddle.net/L6Uzu/3/

This works correctly in Chrome, but Safari doesn’t have as advanced a border-radius implementation, so the rounded corners are not visible.

how to change width of scrollbar-track (line under ScrollBar)

for making scrollbar-track width thinner you can use border-left and border-right in ::-webkit-scrollbar-track with transparency and also change background to transparent and use box-shadow to change the color of track

.main {
width: 100px;
height: 100px;
max-height: 100px;
background-color: #fff;
border: 1px solid red;
overflow-y: auto;
}

/* Scrollbar */

/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
  box-shadow: inset 0 0 5px #dddddd;
  border-radius: 4px;
  border-left: 1.5px solid transparent;
  border-right: 1.5px solid transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #9e9e9e;
  border-radius: 4px;
}

<div class="main">
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
</div>

How to change the width of horizontal scrollbar track?

Something like this?

.slider {
            width: 100%;
            text-align: center;
            overflow: hidden;
        }
        
        .slides {
            display: flex;
            overflow-x: auto;
            margin-bottom:50px;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }
        
        .slides::-webkit-scrollbar {
            width: 10px;
            height: 20px;
        }
        
        .slides::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 10px;
        }
        
        .slides::-webkit-scrollbar-track {
            background: transparent;
            border: 1px solid #ccc;
            max-width: 60% !important;
            margin-left:25vw;
            margin-right:25vw;
        }
        
        .slides::-webkit-scrollbar-track-piece {
            max-width: 200px;
            background-color: #337ab7;
            height: 200px;
        }
        
        .slides>div {
            scroll-snap-align: start;
            flex-shrink: 0;
            width:70%;
            max-width: 70%;
            /* height: auto;  */
            height: 500px;
            /* For Temp */
            margin-right: 50px;
            margin-bottom:50px;
            border-radius: 10px;
            background: #eee;
            transform-origin: center center;
            transform: scale(1);
            transition: transform 0.5s;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
        }
        
        img {
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
        <div class="slides">
            <div id="slide-1">
                1
            </div>
            <div id="slide-2">
                2
            </div>
            <div id="slide-3">
                3
            </div>
            <div id="slide-4">
                4
            </div>
            <div id="slide-5">
                5
            </div>
        </div>
    </div>

How can I change the length of the webkit-scrollbar-thumb?

/* -------------------------------- 
Scroll Bar style
-------------------------------- */
::-webkit-scrollbar {
  background: white;
  width: 4px;
}

::-webkit-scrollbar-thumb {
  background: #666;
  -webkit-border-radius: 6px;
}

::selection {
  background-color: white;
  color: #111;
}

::-moz-selection {
  background-color: white;
  color: #111;
}

Change size of scrollbar thumb with CSS

Another way to do it is assigning border on either side of the track

  border-left: 3px solid white;
  border-right: 3px solid white;

CSS

.cute_scroll::-webkit-scrollbar
{
    width: 10px;
    background-color: #f8bbd0  ;

}

.cute_scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px #f06292 ;
    border-radius: 10px;
    background-color: #f8bbd0  ;

    // Add Border on Track
    border-left: 3px solid white;
    border-right: 3px solid white;

}

.cute_scroll::-webkit-scrollbar-thumb
{
    border-radius: 20px;
    -webkit-box-shadow: inset 0 0 px #ad1457 ;
    background-color: #e91e63   ;

}

Result

https://codepen.io/hiteshsahu/pen/eGQOwJ

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>

css ::-webkit-scrollbar-thumb can't change scale(gradient color)

To make thumb thinner use: background-clip: padding-box then add some padding to the thumb and this should work fine.

Then to make it wider when hovering remove padding-box by adding: background-clip: initial;

Note that There is no way to make thumb wider than scrollbar

Working Demo:

body {  height: 2000px;}
 ::-webkit-scrollbar {  width: 20px;}
 ::-webkit-scrollbar-track {  background: linear-gradient(rgba(0, 0, 139, 0.7), rgba(0, 100, 0, 0.8));  overflow: auto;}
 ::-webkit-scrollbar-thumb {  background: rgba(255, 255, 255, 0.7);  overflow: auto;  border: 5px solid transparent;  background-clip: padding-box;  border-radius: 20px;  transition: height 0.2s ease-in-out;  padding: 5px;}
 ::-webkit-scrollbar-thumb:hover {  background-clip: initial;}

Webkit Scrollbar Width Change

.class::-webkit-scrollbar{ width :6px; }
The above worked for me. I wanted to apply the width only when the class "class" was added to an element.

---

Related Topics