我的滚动条无法正常工作答案

【问题标题】：I have scroller bar is not working properly我的滚动条无法正常工作
【发布时间】：2020-03-20 11:14:07
【问题描述】：

我的页面上有一个评论部分，我为 cmets 添加了一个滚动条。如果在 cmets 部分中没有 cmets，那么我想隐藏滚动条。在我的 CSS 中，我给出了 overflow: auto;，但当没有 cmets 时它仍然显示滚动条。

CSS：

<style>
    .scrollbar
             {
                margin-left: 30px;
                float: left;
                height: 300px;
                width: 100%;
                margin-bottom: 25px;
                overflow: auto;
             }

             .force-overflow
             {
                min-height: 450px;
             }
             #style-6::-webkit-scrollbar-track
             {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                 background-color: #F5F5F5;
             }
             #style-6::-webkit-scrollbar
             {
                width: 10px;
                background-color: #F5F5F5;
             }

             #style-6::-webkit-scrollbar-thumb
             {
                background-color: #F90; 
                background-image: -webkit-linear-gradient(45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent)
              }
</style>

代码：

<div class="scrollbar" id="style-6">
               <div style=" height:270px;" class="force-overflow">
                  <?php foreach ($userComments as $comment):?> 
                  <div class="post-details-wrapper">
                     <?php 
                        $postdate =strtotime($comment['timestamp']);
                        $now = time();
                        ?>
                     <div class="col-sm-12">
                        <p>
                           <img style="height: 45px;width: 48px;border-radius:50%;" src="<?php echo base_url();echo $comment['thumb_url']?>" />
                           &nbsp;
                           <b style="padding-right:6px;padding-left:6px;border-radius:25px;background-color:#888888;color:white;font-family:Roboto, Arial, sans-serif;font-weight:500;>"><?php echo $comment['username'];?></b>
                           &nbsp;<?php echo date('d-m-Y',$postdate);?>
                        </p>
                     </div>
                     <div class="col-sm-12">
                        &nbsp;&nbsp;
                        <p style="font-size:15px;"><?php echo $comment['comment']?></p>
                     </div>
                  </div>
                  <?php endforeach;?>
               </div>
             </div>

在下图中，您可以看到没有 cmets 时出现的滚动条。

【问题讨论】：

标签： php html css twitter-bootstrap-3 scrollbar

【解决方案1】：

尝试设置：overflow-y:auto; 而不是 overflow:auto; 也许会有所帮助

【讨论】：

尝试在你的 .force-overflow 类中改变 min-height。它设置为 450px，比 .scrollbar 中的 300px 多。

【解决方案2】：

将滚动条高度设为 min-height: 300px 。它可能会有所帮助。

.scrollbar
         {
            margin-left: 30px;
            float: left;
            min-height: 300px;
            width: 100%;
            margin-bottom: 25px;
            overflow: auto;
         }

【讨论】：

它隐藏了 scroller 栏，但是当我显示我的所有 cmets 时它仍然隐藏了 scroller 栏