文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >要根据条件删除div滚动条

问要根据条件删除div滚动条
EN

Stack Overflow用户
提问于 2020-03-04 02:06:54
回答 4查看 301关注 0票数 0

我在这个过程中挣扎至今还没有什么..。

我有一个带有自定义滚动条的div，我正在尝试的是，当div小于196 am时，我想要被删除的滚动条，如果是更多，则是196 am滚动条。对不起，我的英语不好，并感谢任何支持！

​

代码语言：javascript
复制
$(".scrollbar").scroll(function() {
  var h = this.innerHeight;
  if (h > 100) {
    $(".cstm").addClass("scrollbar");
  } else {
    $('.cstm').removeClass("scrollbar");
  }
});
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

jquery
html
css
javascript
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2020-03-04 02:22:03

好的。我用setInterval功能实现了你需要的东西。函数连续执行其状态。当高度大于100 is时。它增加了德类。否则它就会把它移除。

你可以在我的片段中检查这个行为。

希望它能帮上忙

​

代码语言：javascript
复制
setInterval(function(){ 
     var h = $(".scrollbar").height();

     if (h > 100) {
        $(".cstm").addClass("scrollbar");
     } else  { 
       $('.cstm').removeClass("scrollbar");
     }    
}, 50);
代码语言：javascript
复制
 .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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2020-03-04 02:15:40

您目前正在测试哪个浏览器？我试着用chrome在src上运行这个示例，它看起来很有效。

票数 0
EN

Stack Overflow用户

发布于 2020-03-04 02:20:29

试试这个：

代码语言：javascript
复制
  height: 590px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  &::-webkit-scrollbar
    {
      width:0px;
    }

你应该有一个有限的高度和overflow-y是隐藏的。此外，您还应该定义滚动条的宽度，如上面的代码。希望能帮上忙。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/60518102

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档