javascript - 根据条件删除 div 滚动条

Question

我正在努力应对这个过程，但到目前为止什么都没有......

我有一个带有自定义滚动条的div，我正在尝试的是，当div小于196px时，我想删除滚动条，如果大于196px，则滚动条会出现。抱歉我的英语不好，感谢您的支持!

$(".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 函数实现了您所需要的。 Setinterval 函数连续执行其语句。当高度高于100px时。它增加了类(Class)。否则它会将其删除。

您可以在我的代码片段中检查此行为。

希望对你有帮助

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>