Ok. I achived what you need using setInterval funcion. Setintervalfunction executes its statments continuously. When the height is higher than 100px. it add de class. Else its removes it.
You can check this behavior in my snippet.
Hope it helps
setInterval(function(){
var h = $(".scrollbar").height();
if (h > 100) {
$(".cstm").addClass("scrollbar");
} else {
$('.cstm').removeClass("scrollbar");
}
}, 50);
.scrollbar {
height: 196px;
overflow-y: scroll;
padding: 4px;
}
#style-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: red;
}
#style-3::-webkit-scrollbar
{
width: 4px;
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb
{
background-color: #000000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="cstm scrollbar" id="style-3" style="display: block;">
<div class="my-box">
<div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
<center>
<i class="animated flash fa fa-times-circle"></i>
INFO BOX 1
</center>
</div><br>
<div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
<center>INFO BOX 2 </center>
</div><br>
<div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
<center>INFO BOX 3 </center>
</div><br>
<div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
<center>INFO BOX 4 </center>
</div><br>
<div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
<center>INFO BOX 5 </center>
</div><br>
<div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
<center>INFO BOX 6 </center>
</div><br>
<div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
<center> ON FEW BOXES THE RED SCROLL TO BE REMOVED</center>
</div><br>
</div>
</div>
Which browser are you currently testing? I tried running the example on your src with chrome and it seems to work
Try this:
height: 590px;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: none;
&::-webkit-scrollbar
{
width:0px;
}
You should have a limited height and overflow-y is hidden.
Also you should define scroll bar width like above code.
Hope it helps.
You could try instead of just removing the scrollbar class to add a class that explicitly states no-scrollbar:
$(".scrollbar").scroll(function () {
var h = this.innerHeight;
if (h > 100) {
$(".cstm").addClass("scrollbar");
} else {
$('.cstm').removeClass("scrollbar");
$(".cstm").addClass("no-scrollbar");
}
});
.no-scrollbar {
overflow-y: hidden;
}
I’m struggling with this process and nothing so far….
I have a div with custom scrollbar what i am trying is when the div is less than 196px the scrollbar i want to be removed and if is more then 196px the scroll to appear. Sorry for my bad English, and thanks for any support!
$(".scrollbar").scroll(function() {
var h = this.innerHeight;
if (h > 100) {
$(".cstm").addClass("scrollbar");
} else {
$('.cstm').removeClass("scrollbar");
}
});
.scrollbar {
height: 196px;
overflow-y: scroll;
padding: 4px;
}
#style-3::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: red;
}
#style-3::-webkit-scrollbar {
width: 4px;
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb {
background-color: #000000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="cstm scrollbar" id="style-3" style="display: block;">
<div class="my-box">
<div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
<center>
<i class="animated flash fa fa-times-circle"></i> INFO BOX 1
</center>
</div><br>
<div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
<center>INFO BOX 2 </center>
</div><br>
<div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
<center> ON FEW BOXES THE RED SCROLL TO BE REMOVED</center>
</div><br>
</div>
</div>
Thank you, but still not working when i add more boxes that passes 196px the scrollbar is not showing, see here:
Try it now, I add some boxes to check the behavior. I think now it works as expected.
Notice in my example the scroll appears when the .scrollbar div tag is bigger than 100px. You must change that in the code if you want to appear at 196px
Ok, now please with your code just remove the boxes to be at least 3 boxes, and see if the scrollbar is removed.
