Detecting whether overflow is coming into play on an element

I have a div, it will be a certain fixed height. Say 500px. Generally it will have content blocks longer than 500px and using overflow: auto; a scrollbar will appear in the element. However on some occasions it does not and the design looks wonky (the scroll bar is indeed a design element here).

Markup might lo开发者_开发知识库ok like this:

<div class="col2">
  ...
</div>

When .col2 has overflowing elements (i.e. a scrollbar) I want to do nothing, when it does not, I want to add another class (something with a border), maybe .border.

Just not sure how to go about this? Preferably with jQuery as that library is already being used. Would really appreciate any help!

This should assist you... Basically create to functions that tell you weather or not the div will have a scrollbar. (either vertical or horizontal)

$.fn.hasVerticalScrollBar = function () {
  if (this[0].clientHeight < this[0].scrollHeight) {
    return true
  } else {
    return false
  }
} 

$.fn.hasHorizontalScrollBar = function() {
  if (this[0].clientWidth < this[0].scrollWidth) {
    return true
  } else {
    return false
  }
} 

Usage

alert($('#mydivid').hasHorizontalScrollBar());
alert($('#mydivid').hasVerticalScrollBar());