Thursday, August 7, 2014

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.


var dummyDiv = document.createElement("div"); // Create a dummy DIV = "scroll"; // force it to have a scrollbar = "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


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.

No comments:

Post a Comment