如何區分兩個div使用和不使用滾動條

Question

我有一個CSS

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

和HTML一個div

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

如果它太高滾動Ÿ成爲出現，沒有內容沒有滾動條。 ..how可以確定滾動條存在或不存在使用jQuery

http://jsfiddle.net/0p0k3f2h/

在上面的鏈接我被用於相同的div有和沒有內容

Answer 1

你的問題：如何確定滾動條是否存在或不使用jquery？

您可以檢查height()與scrollHeight：

$('.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>

Answer 2

我沒有完全得到你的問題，但如果你試圖讓滾動條消失，如果它不是必需的試試這個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 3

使用jQuery 「滾動」 功能，您可以輕鬆識別。

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

Answer 4

如果你想看看是否有一個滾動條或不使用JavaScript（或jQuery的，如果你喜歡）得到一個內部元件的身高，如果在你的父元素最大高度，然後應該有一個滾動條

Answer 5

你必須改變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包含很多需要滾動的文本，它將在那裏，否則它將不會顯示。