CODEWITHSUNDEEP
javascriptjqueryoverflow
Fuego DeBassi
Fuego DeBassi

Reputation: 3017

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 look 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!

Upvotes: 2

Views: 135

Answers (1)

John Hartsock
John Hartsock

Reputation: 86882

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());

Upvotes: 1

Related Questions