CODEWITHSUNDEEP
javascriptjqueryhtmlselect
user1043646
user1043646

Reputation:

How can you detect if a scroll box (html element) is scrollable

Weird question, but I would like to know if there is a possible way of detecting if a select box with the multiple attribute is scrollable (i.e. enough elements in list to require the scrolling of the select box) via jQuery or javascript ?

Regards,

Mary

Upvotes: 2

Views: 830

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

You need to compare the visible height() of the element to the scrollHeight, something like this:

if ($('#foo').height() < $('#foo').prop('scrollHeight')) {
  console.log('scrollable');
}

Working example:

var $scroll = $('#scroll');

if ($scroll.height() < $scroll.prop('scrollHeight')) {
  console.log('Target element is scrollable');
}
#scroll {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100px;
}

#content {
  height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroll">
  <div id="content">Content</div>
</div>

Upvotes: 4

Related Questions