How to Increase a Scrollbar's Width Using CSS

How can I increase a scrollbar's width using CSS?

If you are talking about the scrollbar that automatically appears on a div with overflow: scroll (or auto), then no, that's still a native scrollbar rendered by the browser using normal OS widgets, and not something that can be styled(*).

Whilst you can replace it with a proxy made out of stylable divs and JavaScript as suggested by Matt, I wouldn't recommend it for the general case. Script-driven scrollbars never quite behave exactly the same as real OS scrollbars, causing usability and accessibility problems.

(*: Except for the IE colouring styles, which I wouldn't really recommend either. Apart from being IE-only, using them forces IE to fall back from using nice scrollbar images from the current Windows theme to ugly old Win95-style scrollbars.)

How to increase width of the scroll bar when user hover's on it

Try This:-

document.addEventListener("mousemove", function(e){
        let ele = document.getElementById('element');
        let distance = ele.offsetLeft + ele.offsetWidth - e.pageX;
        distance < 15 && distance > -15 ? ele.classList.add('more-width') : ele.classList.remove('more-width');
    });

#element {
     position: relative;
     left: 150px;
     top: 150px;
     width: 200px;
     max-height: 200px;
     background-color: rgba(255, 0, 0, 0.55);
     overflow: auto;
}
 #element::-webkit-scrollbar-thumb {
     background: #888;
}
 #element::-webkit-scrollbar {
     width: 5px;
}
 #element.more-width::-webkit-scrollbar {
     width: 20px;
}

<div id="element">
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
</div>

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.

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>

how to increase scroll bar width when mouse over

It should work

div {
    width: 300px;
    height: 300px;
    overflow-y: scroll;
    background-color: blue;
}

/* Custom Webkit Scrollbar */
/* http://css-tricks.com/custom-scrollbars-in-webkit/ */
::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

::-webkit-scrollbar:hover {
    height: 40px;
    width: 40px;
}


::-webkit-scrollbar-thumb {
    background-color: red;
}
::-webkit-scrollbar-thumb:hover {
    background-color: blue;
}
div:hover::-webkit-scrollbar-corner {
    width: 40px;
    /*background-color: red !important;*/
}

::-webkit-scrollbar-track-piece {
    /*background-color: #efefef;*/
}

::-webkit-scrollbar-thumb:vertical {
    /*background-color: #666;*/
}

<div><img src="http://placehold.it/500x500" /></div>

Change the width of horizontal scroll bar

This can be done using a customisation of the end and start scrollbar track pieces.

Effectively, you make the start and end piece invisible and set a large margin on it, and it will reduce the width of the available scrollbar to the size you want.

You can modify the position and width by changing the margins on the start and end piece.

See the following demonstration:

.container {  width: 300px;}
.inner {  display: flex;  overflow-x: scroll;}
.inner::-webkit-scrollbar {  height: 5px;}  .inner::-webkit-scrollbar-thumb {  background-color: blue;}
.inner::-webkit-scrollbar-track-piece:end {  margin-right: 50px; }
.inner::-webkit-scrollbar-track-piece:start {  margin-left: 50px;}

<div class="container">  <div class="inner">    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>    <div>Hello</div>  </div></div>