How to differentiate two divs with and without scroll bars

Question

I have a div with css

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

and HTML

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

if it's too high scroll y become appear and no content no scroll bar...how can determine scroll bar is present or not using Jquery

http://jsfiddle.net/0p0k3f2h/

in the above link i was used the same div with and without content

Please post all the relevant code within the question. Your question by itself makes little sense without the HTML from your JSFiddle snippet, and if JSFiddle goes down for whatever reason this question will be unsalvageable. — James Donnelly, Jan 06 '15 at 11:16
possible duplicate of [How can I check if a scrollbar is visible?](http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible) — Abhitalks, Jan 06 '15 at 11:22

score 0 · Answer 1 · answered Jan 06 '15 at 11:20

I did't completely get your question but if you are trying to make the scroll bar disappear if it is not required try this http://jsfiddle.net/0p0k3f2h/2/.

Use overflow:auto;

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

score 0 · Answer 2 · answered Jan 06 '15 at 11:20

0

Using jquery "scroll" function you can easily identify.

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

answered Jan 06 '15 at 11:20

Suresh Ponnukalai

13,820
5
34
54

score 0 · Answer 3 · answered Jan 06 '15 at 11:21

0

If you want to see if there is a scroll bar or not, use javascript (or jquery if you prefer) to get the hight of an inner element, if its over you parent elements max-height, then there should be a scrollbar

answered Jan 06 '15 at 11:21

atmd

7,430
2
33
64

score 0 · Answer 4 · answered Jan 06 '15 at 11:21

0

You have to change overflow-y: scroll; to overflow-y: auto; to do that:

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

Here's the updated working DEMO.

And if the div contains much text that needs scroll it will be there, else it will not be shown.

answered Jan 06 '15 at 11:21

cнŝdk

31,391
7
56
78

if I've read it right the OP wants to use javascript to check IF a scrollbar is visible or not (due to content inside), rather then use css to show/hide the scrollbar – atmd Jan 06 '15 at 11:22
Yes, but if CSS gives the wanted result why whould we use Javascript??? – cнŝdk Jan 06 '15 at 11:24
css can't tell you if a scrollbar is visible. I.e. if the user wanted to 'do' something IF the div had a scrollbar (maybe content is dynamic from the server), then javascript would be required. But again I mayhave missunderstood the OP, 'differentiate' to me suggests somesort of check rather then a style rule – atmd Jan 06 '15 at 11:27
"how can determine scroll bar is present or not using Jquery" - OP – atmd Jan 06 '15 at 11:27
But why do we need to determine if the scroll bar is present or not if CSS can do all the job for us? I'm quite sure that the OP wants to make this scroll bar show automatically whenever it's needed. – cнŝdk Jan 06 '15 at 11:30
just quoting from the question "how can determine scroll bar is present or not using Jquery", you'd have to ask the OP as to why he wants to do it – atmd Jan 06 '15 at 11:31
@atmd Yes indeed, I saw it and Thanks too for pointing it out, but I'm sure that logically that's what the OP wants to achieve. – cнŝdk Jan 06 '15 at 11:33
Thanx everybody I got what I needed – Tibin Varghese Jan 06 '15 at 11:35

Jai · Accepted Answer · 2015-01-06T11:29:31.693

Your question : how can determine scroll bar is present or not using Jquery?

You can check for the height() with 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>

Whoa! No reasons for downvote as this code is working. – Jai Jan 06 '15 at 11:28 — Jai, Jan 06 '15 at 11:28

How to differentiate two divs with and without scroll bars

5 Answers5