如何区分带滚动条和不带滚动条的两个div

Question

我有一个 div 和 css

.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/

在上面 link 我使用了相同的 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"scroll"函数可以轻松识别。

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

Answer 3

如果您想查看是否有滚动条，请使用 javascript（如果您愿意，也可以使用 jquery）获取内部元素的高度，如果它超过您的父元素元素最大高度，那么应该有一个滚动条

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 确定滚动条是否存在？

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

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

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

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

如何区分带滚动条和不带滚动条的两个div

How to differentiate two divs with and without scroll bars

html

javascript

css

jquery