Sanjeev K Sanjeev K - 23 days ago 10
HTML Question

Get scrollbar width and minus from div width

I have the following code where the its getting the scroll width and minus it from the div width and it works fine, but the problem is its not working within window.resize, how do I get it working in window.resize?

Here is the JS code

//get scrollbar width
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
//header width minus scrollbar width
$("header").width($("header").width() - getScrollBarWidth() + "px");

Answer

Try this solution, it should work

I have created a function and then entered that function in resize function

resizeDiv();
window.onresize = function(event) {
    resizeDiv();
}
function resizeDiv() {
    var winWidth = $(window).width();
    $("header").css({"width": (winWidth - scrollbarWidth()) + "px"});
}