thr3ads.net - Rails spinoffs - How to determine if an element has a scrollbar? [Nov 2006]

If this information is useful, please help other people find it:
Share via:

Jonathan Weiss

2006-Nov-21 00:47 UTC

How to determine if an element has a scrollbar?

Cheers,

I have a div that has the `overflow: auto;` style and that gets its 
content periodically updated by AJAX. In order to adjust some styles I 
need to know if the div has the scrollbar present.

Does anybody know how to determine this?


Thanks,
Jonathan

-- 
Jonathan Weiss
http://blog.innerewut.de


--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Mark Reginald James

2006-Nov-21 03:20 UTC

head link

Re: How to determine if an element has a scrollbar?

Jonathan Weiss wrote:
> I have a div that has the `overflow: auto;` style and that gets its 
> content periodically updated by AJAX. In order to adjust some styles I 
> need to know if the div has the scrollbar present.
> 
> Does anybody know how to determine this?
Try:

var has_scroll = (element.scrollHeight != element.clientHeight);

-- 
We develop, watch us RoR, in numbers too big to ignore.


--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Jonathan Weiss

2006-Nov-21 12:56 UTC

head link

Re: How to determine if an element has a scrollbar?

Mark Reginald James wrote:> Jonathan Weiss wrote:
> 
>> I have a div that has the `overflow: auto;` style and that gets its 
>> content periodically updated by AJAX. In order to adjust some styles I 
>> need to know if the div has the scrollbar present.
>>
>> Does anybody know how to determine this?
> 
> Try:
> 
> var has_scroll = (element.scrollHeight != element.clientHeight);
> 
Thanks, this works!


Jonathan

-- 
Jonathan Weiss
http://blog.innerewut.de

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Fred

2006-Nov-22 07:06 UTC

head link

Re: How to determine if an element has a scrollbar?

Jonathan Weiss wrote:> Mark Reginald James wrote:
> > Jonathan Weiss wrote:
> >
> >> I have a div that has the `overflow: auto;` style and that gets
its
> >> content periodically updated by AJAX. In order to adjust some
styles I
> >> need to know if the div has the scrollbar present.
> >>
> >> Does anybody know how to determine this?
> >
> > Try:
> >
> > var has_scroll = (element.scrollHeight != element.clientHeight);
> >
>
> Thanks, this works!
For a very limited number of scenarios in a specific browser, otherwise
it fails far more often than it "works".

A more reliable method is to use the CSS overflow property first and
only use client/scrollHeight if it''s set to auto. Otherwise, you
already know if there is a scrollbar there or not:

  function hasVertScrollbar(el){
    var prop = ''overflow'';
    var hasBar;
    var scrollProp;
    var o;
    // Mozilla et al
    if ((o = document.defaultView) &&
        (o = o.getComputedStyle)){
      scrollProp = o(el,'''')[prop];
    // IE 5+
    } else if (el.currentStyle){
      scrollProp = el.currentStyle[prop];
    }
    // Check overflow property first
    if (''scroll'' == scrollProp){
      hasBar = true;
    } else if (''hidden'' == scrollProp ||
''visible'' == scrollProp){
      hasBar = false;
    } else {  // overflow set to auto or didn''t get property
      hasBar = (el.scrollHeight > el.clientHeight);
    }
    return hasBar;
  }

Tested in IE 6, Firefox 2.0 and Opera 9.  It will still fail in some
browsers, mostly old ones but probably also recent KHTML and Safari.
Note that IE 6 does not properly support inherit, but the script still
reports correctly as far as I can tell.

Where the overflow property can''t be determined, the height test is
used and will be no more unreliable that the original.

It is also worth noting that both clientHeight and scrollHeight are IE
proprietary properties and therefore there is no public standard to
specify how they should behave.  The bottom line is that if you are
using script to control layout, you are doing something wrong anyway.
CSS should be all you need.

-- 
Fred

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Thomas Fuchs

2006-Nov-22 10:44 UTC

head link

Re: How to determine if an element has a scrollbar?

With Prototype you can shorten this (untested code):

function hasVerticalScrollbar(element){
   var overflow = $(element).getStyle(''overflow'');
  
return([''hidden'',''visible''].include(overflow)
? false :
     (overflow==''scroll'' ? true : element.scrollHeight >  
element.clientHeight));
}

best


Am 22.11.2006 um 08:06 schrieb Fred:
> For a very limited number of scenarios in a specific browser,  
> otherwise
> it fails far more often than it "works".
>
> A more reliable method is to use the CSS overflow property first and
> only use client/scrollHeight if it''s set to auto. Otherwise, you
> already know if there is a scrollbar there or not:
>
>   function hasVertScrollbar(el){
>     var prop = ''overflow'';
>     var hasBar;
>     var scrollProp;
>     var o;
>     // Mozilla et al
>     if ((o = document.defaultView) &&
>         (o = o.getComputedStyle)){
>       scrollProp = o(el,'''')[prop];
>     // IE 5+
>     } else if (el.currentStyle){
>       scrollProp = el.currentStyle[prop];
>     }
>     // Check overflow property first
>     if (''scroll'' == scrollProp){
>       hasBar = true;
>     } else if (''hidden'' == scrollProp ||
''visible'' == scrollProp){
>       hasBar = false;
>     } else {  // overflow set to auto or didn''t get property
>       hasBar = (el.scrollHeight > el.clientHeight);
>     }
>     return hasBar;
>   }
>
> Tested in IE 6, Firefox 2.0 and Opera 9.  It will still fail in some
> browsers, mostly old ones but probably also recent KHTML and Safari.
> Note that IE 6 does not properly support inherit, but the script still
> reports correctly as far as I can tell.
>
> Where the overflow property can''t be determined, the height test
is
> used and will be no more unreliable that the original.
>
> It is also worth noting that both clientHeight and scrollHeight are IE
> proprietary properties and therefore there is no public standard to
> specify how they should behave.  The bottom line is that if you are
> using script to control layout, you are doing something wrong anyway.
> CSS should be all you need.
>
> -- 
> Fred
>
>
> >
--
Thomas Fuchs
wollzelle

http://www.wollzelle.com

questentier on AIM
madrobby on irc.freenode.net

http://www.fluxiom.com :: online digital asset management
http://script.aculo.us :: Web 2.0 JavaScript
http://mir.aculo.us :: Where no web developer has gone before





--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Jonathan Weiss

2006-Nov-22 13:20 UTC

head link

Re: How to determine if an element has a scrollbar?

Thomas Fuchs wrote:> With Prototype you can shorten this (untested code):
> 
> function hasVerticalScrollbar(element){
>    var overflow = $(element).getStyle(''overflow'');
>   
return([''hidden'',''visible''].include(overflow)
? false :
>      (overflow==''scroll'' ? true : element.scrollHeight
>
> element.clientHeight));
> }
> 
In my case I knew that I was always testing div with `overflow:auto` but 
this is a much nicer general case code. Tested with Firefox 2.0 and Safari.


Thanks to all!

Joanthan


-- 
Jonathan Weiss
http://blog.innerewut.de

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Nov 2006 - How to determine if an element has a scrollbar?

How to determine if an element has a scrollbar?

Re: How to determine if an element has a scrollbar?

Re: How to determine if an element has a scrollbar?

Re: How to determine if an element has a scrollbar?

Re: How to determine if an element has a scrollbar?

Re: How to determine if an element has a scrollbar?