文章/答案/技术大牛

发布

社区首页 >问答首页 >我的滚动条不能正常工作

问我的滚动条不能正常工作
EN

Stack Overflow用户

提问于 2019-11-25 15:40:00

回答 2查看 39关注 0票数 0

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

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>

在下图中，你可以看到滚动条在没有评论的情况下出现。

php

html

css

twitter-bootstrap-3

scrollbar

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-11-25 15:45:08

尝试设置：overflow-y:auto;而不是overflow:auto;，可能会有所帮助

票数 1

Stack Overflow用户

发布于 2019-11-25 15:48:56

将滚动条高度设为最小高度: 300px。这可能会有所帮助。

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

票数 0

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

原文链接：

https://stackoverflow.com/questions/59027145

复制

相似问题

问我的滚动条不能正常工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的滚动条不能正常工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的滚动条不能正常工作
EN