View Full Version : Detecting Vertical Scrollbar

08-07-2002, 03:07 AM
I need a way in javascript to detect if the vertical scrollbar is present or not on the page.. I need it to work in NS6 so if anyone has a compatible event call to see if a scrollbar is present will help me out a ton..

as far as I got.. but got stuck.. by doing a:
if (window.onscroll){
do something

but I dont' think that is right.. I need it to detect on page load

thanks for you help!


08-07-2002, 05:31 AM
i'm pretty sure you can't detect the scroll bars. what is it that you want to do.

08-07-2002, 05:23 PM
window.menubar.visible seems to return a true every time I access it in mozilla, scrollbar or not, and NS6 does not seem to return anything. I suppose you could use the innerWidth, and outterWidth and see if they are more than say 10 pixels in difference, if they are you could assume a scrollbar? After a quick test, that did not work.

I don't know if this will help you, but if you get desperate enough, it might, window.pageYOffset, and window.pageXOffset will tell you the offset of the page, i.e. if they have scrolled down. Depending on your situation it might be too late. But if you were to onload force the page down, via scrollByLines(##), you could find out if the scrollbars are on the page or needed. I'm not sure what your intention is, but it is something to think about. They work must the same as scrollLeft and scrollTop in IE.

Kind of messy, but something to think about.


08-07-2002, 06:00 PM
... this is rather complicated I'm afraid ...

You have two properties - document.width and window.innerWidth - by evaluating the difference between those two, you can determine if scrollbars are present. But it gets worse - both the evaluated difference and the width of the scrollbar itself varies between different builds of moz and different OSs.

This code finds the true inner width of the window, adjusting for the presence or lack of scrollbars in various builds. It will still only work for users who haven't manually changed their default scrollbar width.

var bWidth=window.innerWidth;
if((mz7&&win&&(agt.indexOf("windows nt 5.1")!=-1))||mac||ns6){if(document.width<=(innerWidth-30)){bWidth-=sbaa;}}
else if(mz7&&win&&(agt.indexOf("windows nt 5.0")!=-1)){if(document.width<=(innerWidth-16)){bWidth-=16;}}
else if(win){if(document.width<=(innerWidth-17)){bWidth-=17;}}

To use this you'll also need a sniffer script to create the browser and OS variables:

var exclude=true;
var agt=navigator.userAgent.toLowerCase();
var ie=false; var ie4=false; var ie5=false; var op5=false; var konqi=false;
if (typeof document.all!="undefined"&&(agt.indexOf('msie')!=-1)){
ie=true; ie4=true; exclude=false;
if (agt.indexOf('msie 4')==-1){ie5=true; ie4=false;}
if (agt.indexOf('opera')!=-1){ie=false; ie4=false; ie5=false; op5=true;}
var ns6=false; var mz7=false;
if (typeof document.getElementById!="undefined"&&!ie){
ns6=true; exclude=false;
if (agt.indexOf('netscape6')==-1){ns6=false; mz7=true;}
if (typeof window.opera!="undefined"){mz7=false; op5=true;}
else if (agt.indexOf('gecko')==-1){mz7=false; exclude=true;}
if (agt.indexOf('opera 4')!=-1){op5=false; mz7=false; exclude=true;}
var ns4=false;
if ((agt.indexOf('mozilla')!=-1)&&(parseInt(navigator.appVersion)>=4)&&!ie&&!op5&&!ns6&&!mz7){ns4=true; exclude=false;}
if (agt.indexOf('webtv')!=-1){ie=false; ie4=false; exclude=true;}
var win=false; var mac=false; var lin=false;
if (agt.indexOf('win')!=-1){win=true; mac=false; lin=false;}
else if (agt.indexOf('mac')!=-1){win=false; mac=true; lin=false;}
else{win=false; mac=false; lin=true;}
if (typeof navigator.vendor!="undefined"){
if (navigator.vendor =="KDE"){
ie=false;ie4=false;ie5=false;konqi = true;ns6=true;ns4 = false;exclude = false;
var thisKDE=agt;
var splitKDE=thisKDE.split("konqueror/");
var aKDE=splitKDE[1].split("; ");
var KDEn=parseFloat(aKDE[0]);
var oldKde=false;
var op6=false;if((agt.indexOf("opera 6")!=-1)||(agt.indexOf("opera/6")!=-1)){op6=true;op5=false;}
var ie6=false;if(ie5&&agt.indexOf("msie 6")!=-1){ie6=true;}
var dcm = document.compatMode;
var com=false;if(ie6&&dcm!="BackCompat"){com=true;}
var ice=false;if(typeof navigator.__ice_version!="undefined"){ice=true; ie=false; ie5=false; ie4=true; ns4=false;}
var ns7=false;if(agt.indexOf("netscape/7")!=-1){mz7=false; ns6=true; ns7=true;}

08-08-2002, 05:34 AM
Thanks for all your help.. the answer was staring me in the face the whole time! I for NS I substituted my original window.innerwidth to the document.width.. I was aligning something to the right of the page and when the scrollbar was gone.. it created a gap.. but this fixes it..

thanks for all you help..