Detect Scrollbar Widths 13,148 views

JavaScript for IE and FF to detect a users scrollbar width in pixels for advanced webpage development.

 1<?php 2function getScrollbarWidth() { 3  var sBarWidth = 0; 4  var scr = null; 5  var inn = null; 6 7  if (is_ie) { 8    // create form 9    scr = document.createElement('form');1011    // move form off screen so no one can see it12    scr.style.position = 'absolute';13    scr.style.top = '-1000px';14    scr.style.left = '-1000px';1516    // create a text area17    inn = document.createElement('textarea');1819    //set id so we can grab it later20    inn.setAttribute('id', 'ta');2122    // add textarea to form23    scr.appendChild(inn);2425    // add the element to the document26    document.getElementsByTagName("body")[0].appendChild(scr);2728    // grab the text area by id29    var tarea = fetch_object('ta');3031    // turn scroll bars off32    tarea.wrap = 'off';3334    // get height35    sBarWidth = tarea.offsetHeight;3637    // turn scroll bars on38    tarea.wrap = 'soft';3940    // get difference41    sBarWidth -= tarea.offsetHeight;42  } else {43    var wNoScroll = 0;44    var wScroll = 0;4546    // Outer scrolling div47    scr = document.createElement('div');4849    // move form off screen so no one can see it50    scr.style.position = 'absolute';51    scr.style.top = '-1000px';52    scr.style.left = '-1000px';5354    // set binding height and width55    scr.style.width = '100px';56    scr.style.height = '50px';5758    // Start with no scrollbar59    scr.style.overflow = 'hidden';6061    // Inner content div62    inn = document.createElement('div');63    inn.style.width = '100%';64    inn.style.height = '200px';6566    // Put the inner div in the scrolling div67    scr.appendChild(inn);6869    // Append the scrolling div to the doc70    document.body.appendChild(scr);7172    // Width of the inner div sans scrollbar73    wNoScroll = inn.offsetWidth;7475    // Add the scrollbar76    scr.style.overflow = 'auto';7778    // Width of the inner div width scrollbar79    wScroll = inn.offsetWidth;8081    // Pixel width of the scrolbar82    sBarWidth = (wNoScroll - wScroll);83  }8485  // Remove the scrolling div from the doc86  document.body.removeChild(document.body.lastChild);8788  return sBarWidth;89}