CODEWITHSUNDEEP
jqueryhtmlcss
Akbar Basha
Akbar Basha

Reputation: 1198

How to find the scroll bar width

Here is my code : 

<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

div.scroll {
    background-color: #00FFFF;
    width: 100px;
    height: 100px;
    overflow: scroll;
}

How do I find the scroll bar width?

Sample Link : https://jsfiddle.net/zc5hrkst/

Upvotes: 0

Views: 1274

Answers (3)

Patel
Patel

Reputation: 1478

You can find that by substracting clientWidth from offsetWidth for y-axis scrollbar.

var scroll = document.getElementById('scroll');
var scrollWidth = $(scroll)[0].offsetWidth - $(scroll)[0].clientWidth
alert(scrollWidth);

Find updated Fiddle here

To find the x-axis scrollbar's height, you can use offsetHeight and clientWidth :

var yScrollHeight = $(scroll)[0].offsetHeight - $(scroll)[0].clientHeight;

Upvotes: 0

ramesh
ramesh

Reputation: 2477

This piece of javascript should give you the scroll bar width.

// Select the Element
var scroll = document.getElementById("[id of div]");

// Get the scrollbar width
var scrollbarWidth = scroll.offsetWidth - scroll.clientWidth;
console.log(scrollbarWidth);

Upvotes: 2

Ionut Necula
Ionut Necula

Reputation: 11472

That depends on the web browser. Normally it should be 17px.

Upvotes: 1

Related Questions