Javascript to Measure Vertical Scrollbar Width

I used the following codes to measure the vertical scrollbar (overflowY) width so that I can place a dummy blank DIV onto the real scrollbar to prevent someone from scrolling by dragging the scroller on the right scrollbar.

<script> var dummyDiv = document.createElement("div"); // Create a dummy DIV dummyDiv.style.overflow = "scroll"; // force it to have a scrollbar dummyDiv.style.width = "50px"; // required for IE, can be other values document.body.appendChild(dummyDiv); // add to DOM var scrollbarWidth = dummyDiv.offsetWidth - dummyDiv.clientWidth; document.body.removeChild(dummyDiv); // remove dummy from DOM alert("The scrollbar width is "+scrollbarWidth); // If I'm not mistaken, for non IE browsers, // except the Mac Safari (scrollbars are of 0 width) and touch devices // such as iPad and tablets, the width is required to increase by 1 </script>

There is a very rare chance that you might need this as most developers nowadays are using JQUERY to take care of the scrolling actions. In case you are a Javascript guy, this is good to know.