полоса прокрутки div должна быть удалена в зависимости от условия

Question

Я борюсь с этим процессом и пока ничего ...

У меня есть div с настраиваемой полосой прокрутки, что я пытаюсь сделать, когда div меньше 196px, полоса прокрутки, которую я хочу удалить и если больше чем 196px прокрутка, чтобы появиться. Извините за мой плохой Энгли sh, и спасибо за любую поддержку!

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

Answer 1

Хорошо. Я получил то, что вам нужно, используя функцию setInterval. Setintervalfunction выполняет свои оценки непрерывно. Когда высота выше 100px. это добавить де класс. Иначе его удаляет.

Вы можете проверить это поведение в моем фрагменте.

Надеюсь, это поможет

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>

Answer 2

Попробуйте:

  height: 590px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  &::-webkit-scrollbar
    {
      width:0px;
    }

Вы должны иметь ограниченную высоту, а overflow-y скрыто. Также вы должны определить ширину полосы прокрутки, как показано выше. Надеюсь, это поможет.

Answer 3

Можно вместо того, чтобы просто удалить класс полосы прокрутки, добавить класс, в котором явно указано отсутствие полосы прокрутки:

$(".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;
}

Answer 4

Какой браузер вы сейчас тестируете? Я попытался запустить пример на вашем sr c с chrome, и похоже, что он работает