How do I add a border to a div that has the style='overflow:auto' only when the scrollbar is activated?

Question

So I have a div that gets content dynamically, and when the content size exceeds a specified height, the overflow:auto kicks in and I get a scroll bar, but not before the content passes that height boundary.

Now I am supposed to add a 1px border around the whole div only when the height is exceeded, and the scrollbar shows up...does anyone have any ideas how this might be accomplished? I tried going through jquery, but I can't grab anything because it's technically not an event like click...

Thanks in advance

Answer 1

I think this might work:

$('#div').bind('resize', function(){
 if($(this).height() > DEFAULT_HEIGHT_OF_YOUR_DIV){
     $(this).css({'border':'1px solid red'});
 }
 else{
     $(this).css({'border':'0px'});
 }
});

HTH.