Check if div is actually overflowing and/or has scrollbar

Question

We have a page with a <DIV style="overflow:auto; height:400px;>...</DIV> section populated with info from a database. Sometimes it contains more text than is visible (hence overflow:auto) and we get a vertical scrollbar.

We would like to change the bottom-border of the <DIV> section to red color IF the text overflows - and as such NOT when we don't have a vertical scrollbar (= the red bottom-border indicates there is more data, because people don't always see pay attention to the scrollbar).

How can this be accomplished?

Setting "border-bottom:1px solid red;" will make the bottom-border red all the time, also when the amount of text doesn't dictate overflow/scrollbars, so that alone won't cut it.

EDIT: You guys are fast, thanks! I will look into the suggestions - thanks again!

I'm not sure how useful it will be - the presence of the scrollbar is a universal indicator of more content - if the users don't pay attention to *it*, how likely are they to acknowledge a "convention" that exists on one page of a single application? — Damien_The_Unbeliever, Aug 02 '12 at 07:43
i think the way is checking the div content width... ex: var x = $(div).html(); if(x.width() > $(div).width()){ /* execute animate border */ } — Acil Az, Aug 02 '12 at 07:45
Very similar to this question: http://stackoverflow.com/questions/7138772/how-to-detect-overflow-in-div-element — Matteo Tassinari, Aug 02 '12 at 07:47
I think a call to action that there is more content, that expands the section to show the extra content is a better solution. What does a red border mean to people? — MetalFrog, Aug 02 '12 at 12:42

score 4 · Answer 1 · answered Aug 02 '12 at 07:52

4

if (myDiv[0].scrollHeight > myDiv.innerHeight()){
     //this has overflowing contetent!
}
else{
   //remove border, etc.
}

answered Aug 02 '12 at 07:52

Robin Maben

22,194
16
64
99

score 0 · Answer 2 · edited Aug 02 '12 at 12:50

0

css

.attention{border-bottom:1px solid red;}

js

$.document(ready(function(){
  var div = ('div#YOUR_OVERFLOW_DIV');

  if ( (div).height()>400){
     $(div).addClass('attention');
  }


});

edited Aug 02 '12 at 12:50

blank

17,852
20
105
159

answered Aug 02 '12 at 07:46

voodoo417

11,861
3
36
40

Check if div is actually overflowing and/or has scrollbar

2 Answers2

Linked