Есть ли способ узнать, есть ли на элементе полоса прокрутки с помощью JQuery?

Question

Допустим, у меня есть такой элемент

<div id="myDiv" style="height:10px; width:100px; overflow:scroll;"> 
   random amount of lorem ipsum... 
</div>

Есть ли способ в JS или Jquery посмотреть на $ ("# myDiv") и посмотреть, есть ли у него полосы прокрутки?

Спасибо

Дейв

Answer 1

Это должно работать

$.fn.hasVerticalScrollBar = function () {
     return this[0].clientHeight < this[0].scrollHeight;
}

$.fn.hasHorizontalScrollBar = function () {
    return this[0].clientWidth < this[0].scrollWidth;
} 

Использование

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

EDIT:

Чтобы использовать этот метод с невидимым элементом, клонируйте div, установите его непрозрачность равным 0, добавьте клон в тело, проверьте, есть ли у клона полоса прокрутки, а затем удалите клон:

var clone = $('#mydivid').clone();
clone.css('opacity', '0').appendTo('body');
if (clone.hasHorizontalScrollBar()) {
   //do the job here
}
clone.remove();

Answer 2

Вы можете заключить текст в другой элемент div и сравнить ширину / высоту этого элемента с #myDiv.Если это выше, есть полоса прокрутки:

<div id="myDiv" style="..."> 
    <div id="inner">random amount of lorem ipsum...</div>
</div>

Пример:

if( $('#inner').height() > $('#myDiv').height() ){
  alert('vertical scrollbar');
}

if( $('#inner').width() > $('#myDiv').width() ){
  alert('horizontal scrollbar');
}