How to determine whether element has scrollbar

Did you find an answer to this?
As far as I know it is not possible to determine.

What I wonder is, how do you handle the width of your element? Why don't you set a width attribute lets say of 50 px and then check if the content of the box is greater than 50px. Then you know it has scrollbars.

Don't know if this helps you.

Cheers

Peter

Peter,

Your idea is actually what I have been using since I didn't get an answer to this question.
But actually I haven't checked if a browser will report the width or height to more that the actual width or height of the box even though it has overflowed (showing scrollbars).

What I do now is not to set "overflow: auto" and then just check if box.clientHeight has exceeded the maximun I choose. If it has, I remove the last item again. In IE this only works if the height of the box has been set in css. Otherwise it doesn't report the clientHeight property.

Peter, how would you suggest to "check if the content of the box is greater than 50px"?

Jakob

I finally found a way to check if an element has a scrollbar.

It is actually quite simple, since if there is a scrollbar it will take up some space inside the element.

If the elem.style.width is greater than elem.clientWidth (about 14-16 px difference), then it suggest that the element has a vertical scrollbar.

This can be used for various purposes, - for instance to automatically expand a textarea box when it get's full:

<textarea style="width: 200px height: 50px; overflow: auto" onkeyup="textarea_size(this)"></textarea>

<script>
function textarea_size(elem)
{
 w1 = elem.style.width.replace(/[^\d]/g, "");
 w2 = elem.clientWidth;
 if ((w1 - w2) > 10)
 {
  h = elem.style.height.replace(/[^\d]/g, "");
  elem.style.height = parseInt(parseInt(h) + 8) + "px";
  textarea_size(elem);
 }
}
</script>

This example is quickly written and briefly tested on FF2.0 and IE 6. There is most probably room for improvement.
For instance, it is assumed that the width and height is set in pixels and that the scrollbar has not been modified to be narrower that 10px...

Since my last answer (to my own question) I've found a much better solution.
I've discovered the element property "scrollHeight"!
Read more about it in the summary.

The simple solution:
elem.clientHeight < elem.scrollHeight
where elem is the block element (div, textarea, etc.) you want to check.
If the above comparison is true, then the block element has a vertical scrollbar. If you want to check for horizontal scrollbars, you should replace Height with Width.

Here is a function to demonstrate it:
function has_scrollbar(elem_id)
  {
   elem = document.getElementById(elem_id);
   if (elem.clientHeight < elem.scrollHeight)
    alert("The element has a vertical scrollbar!");
   else
    alert("The element doesn't have a vertical scrollbar.");
  }

Call the function with the id of the element to check. It will pop up a javascript alert with the answer.

Here is a function that automatically sizes an element vertically to fit the content:
function autosize(elem_id)
  {
   elem = document.getElementById(elem_id);
   elem.style.height = elem.scrollHeight + "px";
  }

In Firefox it will only expand the box - never contract it.

Click here to see the Answer Discussion that preceded this summary.

Login to rate this summary: Good  |  Bad