Quantcast

Jump to content


Photo

Getting scrollbar width


  • Please log in to reply
3 replies to this topic

#1 Noitidart

Noitidart
  • Neocodex Co-Founder

  • 23214 posts


Users Awards

Posted 03 August 2010 - 07:57 PM

Ok so to get scroll bar width in pixels. I did it this way:

function getScrollbarWidth(){
var iDiv = new Element('div');
iDiv.setStyle({height:'100px'});
var oDiv = new Element('div');
oDiv.setStyle({width:'50px',height:'50px',overflow:'hidden',position:'absolute',top:'200px',left:'200px'})
    document.body.insert({top:oDiv});
oDiv.insert({top:iDiv});
    var w1 = iDiv.getWidth();
    oDiv.setStyle({overflow:'auto'});
    var w2 = iDiv.getWidth();
    oDiv.remove();
    return (w1 - w2); 

}

I used prototype. The jquery verison is here:http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

I just dont know if its totally crossbrowser.

#2 Noitidart

Noitidart
  • Neocodex Co-Founder

  • 23214 posts


Users Awards

Posted 08 August 2010 - 02:34 AM

Any thoughts?

#3 Noitidart

Noitidart
  • Neocodex Co-Founder

  • 23214 posts


Users Awards

Posted 10 August 2010 - 04:45 PM

Update:
Crossbrowserness (IE compatibility
Coordinates are off screen at top so no scroll bars on body appear

iDiv = new Element('div');
iDiv.setStyle({height:'100px'});
var oDiv = new Element('div');
iDiv.id = 'asdfoiasdf';
oDiv.setStyle({width:'50px',height:'50px',overflow:'hidden',position:'absolute',top:'200px',left:'200px'})
    $(document.body).insert({top:oDiv});
oDiv.insert({top:iDiv});
    var w1 = oDiv.getWidth();
    oDiv.setStyle({overflow:'auto'});
    var w2 = iDiv.getWidth();
if (Prototype.Browser.IE){
    w2 = iDiv.getWidth()
}
    oDiv.remove();
    return (w1 - w2); 

}

Ok made some mistakes fixed it up. There was no bug to start with.

IE is the weirdest thing. Why on earth do i have to call it twice?
if (Prototype.Browser.IE){
    w2 = iDiv.getWidth()
}
But it works. Anyone know why?

#4 Noitidart

Noitidart
  • Neocodex Co-Founder

  • 23214 posts


Users Awards

Posted 12 August 2010 - 01:55 AM

Verified to work with chrome.


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users