Twitter Bootstrap Question posted in

div scroll bar to be removed based on condition-Twitter bootstrap

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

4

Answers


  1. 0

    Which browser are you currently testing? I tried running the example on your src with chrome and it seems to work

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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;
}
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search