This tutorial/ explanation of the script will go over how to find the width or height of the scrollbar using jQuery. This small script works in all browsers.

Remember that this code is jQuery and you must include the jQuery library on your page.
You can download it here: http://docs.jquery.com/Downloading_jQuery#Download_jQuery
or use the google code links: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

To include the library just put a <script> tag in the head of your document. Here is an example using the google code:

Code: [Select]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Now to the script's you want:

To find the width(when scroll-bar is vertical) and height(when scroll-bar is horizontal):
We add 2 div's to the document out of site and not interrupting your content by positioning them absolutely and off the page. The surrounding div is half as tall as or inner div and we set the overflow-y to scroll so the scroll bar appears and takes up space inside the div. We then take the width of the surrounding div and the inner width of the inner div and get the difference which is the width of our scrollbar. Since the width(when scroll-bar is vertical) and height(when scroll-bar is horizontal) of the scroll bar are the same you have both measurements. If you want the height of the scroll bar just find the length of the container.

Code: [Select]

// Find the Width of the Scrollbar
var wide_scroll_html = '<div id="wide_scroll_div_one" style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div id="wide_scroll_div_two" style="height:100px;width:100%"></div></div>';
$("body").append(wide_scroll_html); // Append our div and add the hmtl to your document for calculations
var scroll_w1 = $("#wide_scroll_div_one").width(); // Getting the width of the surrounding(parent) div - we already know it is 50px since we styled it but just to make sure.
var scroll_w2 = $("#wide_scroll_div_two").innerWidth(); // Find the inner width of the inner(child) div.
var scroll_bar_width = scroll_w1 - scroll_w2; // subtract the difference
$("#wide_scroll_div_one").remove(); // remove the html from your document


[Posted:]

This tutorial/ explanation of the script will go over how to find the width or height of the scrollbar using jQuery. This small script works in all browsers.

Remember that this code is jQuery and you must include the jQuery library on your page.
You can download it here: http://docs.jquery.com/Downloading_jQuery#Download_jQuery
or use the google code links: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

To include the library just put a <script> tag in the head of your document. Here is an example using the google code:

Code: [Select]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Now to the script's you want:

To find the width(when scroll-bar is vertical) and height(when scroll-bar is horizontal):
We add 2 div's to the document out of site and not interrupting your content by positioning them absolutely and off the page. The surrounding div is half as tall as or inner div and we set the overflow-y to scroll so the scroll bar appears and takes up space inside the div. We then take the width of the surrounding div and the inner width of the inner div and get the difference which is the width of our scrollbar. Since the width(when scroll-bar is vertical) and height(when scroll-bar is horizontal) of the scroll bar are the same you have both measurements. If you want the height of the scroll bar just find the length of the container.

Code: [Select]

// Find the Width of the Scrollbar
var wide_scroll_html = '<div id="wide_scroll_div_one" style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div id="wide_scroll_div_two" style="height:100px;width:100%"></div></div>';
$("body").append(wide_scroll_html); // Append our div and add the hmtl to your document for calculations
var scroll_w1 = $("#wide_scroll_div_one").width(); // Getting the width of the surrounding(parent) div - we already know it is 50px since we styled it but just to make sure.
var scroll_w2 = $("#wide_scroll_div_two").innerWidth(); // Find the inner width of the inner(child) div.
var scroll_bar_width = scroll_w1 - scroll_w2; // subtract the difference
$("#wide_scroll_div_one").remove(); // remove the html from your document