Question

我有一个带css的div

.comment-list {
margin: 20px 0;
max-height: 100px;
min-height: 100px;
overflow-y: scroll;
width: 100%;
background-color:#000;
}

和HTML

<div class="comment-list"> </div>

如果它太高滚动y出现而没有内容没有滚动条...如何使用Jquery确定滚动条是否存在

http://jsfiddle.net/0p0k3f2h/

在上面的链接中我使用了相同的div，包含和不包含内容

Answer 1

我没有完全得到您的问题，但如果您尝试使滚动条消失，如果不需要请尝试此http://jsfiddle.net/0p0k3f2h/2/。

使用overflow:auto;

.comment-list {
margin: 20px 0;
max-height: 100px;
min-height: 100px;
overflow-y: auto;
width: 100%;
background-color:#000;
}

Answer 2

使用jquery＆＃34;滚动＆＃34;您可以轻松识别的功能。

 $( ".comment-list" ).scroll(function() {
    // scrollbar appeared
 }

Answer 3

如果你想查看是否有滚动条，使用javascript（或jquery，如果你愿意）获得内部元素的高度，如果它超过你的父元素max-height，那么应该有一个滚动条

Answer 4

您必须将overflow-y: scroll;更改为overflow-y: auto;才能执行此操作：

.comment-list {
margin: 20px 0;
max-height: 100px;
min-height: 100px;
overflow-y: auto;
width: 100%;
background-color:#000;
}

此处 the updated working DEMO 。

如果div包含很多需要滚动的文本，那么它就会存在，否则就不会显示。

Answer 5

您的问题：如何使用Jquery确定滚动条是否存在？

您可以使用height()检查scrollHeight：

＆＃13;

$('.comment-list').each(function(i){
   if ($(this).height() < $(this).get(0).scrollHeight){
      $(this).prepend('has Scrollbar').css('color', 'white');
   }
});

＆＃13;

.comment-list {
    margin: 20px 0;
    max-height: 100px;
    min-height: 100px;
    overflow-y: scroll;
    width: 100%;
    background-color:#000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-list"> </div>
      
<div class="comment-list">
    foo<br/>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
    foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
</div>

＆＃13;

如何使用和不使用滚动条来区分两个div

5 个答案: