Question

所以标题说明了这一切，我已经使用webkit格式化了我的滚动条，我的格式看起来没问题但是必须将父div设置为overflow：hidden来阻止子div上的滚动条填充父级但现在酒吧已经消失了。

有问题的网页：http://aspiresupportandhousing.com/

您可以在新闻标题下看到问题，您可以看到曲目，但不能看到拇指。

CSS：

#main_right {
    height: 500px;
    overflow: auto;
    width: 285px;
    top: 0px;
    right: 0px;
    background: url(../images/news.jpg) no-repeat center top #FFFFFF;
    border: 1px solid rgba(93, 93, 94, 0.4);
    border-radius: 20px;
    box-shadow: 10px 10px 20px #5d5d5e;
    position: absolute;
    overflow: hidden;
}

#news {
    height: 50px;
    width: 100px;
    top: 50px;
    right: 0px;
    position: absolute;
    border-radius: 20px 0px 0px 20px;
    background-color: #5d5d5e;
    padding: 0px 10px;
    line-height: 50px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    color: #FFFFFF;
}

#news_info {
    overflow: scroll;
    width: 265px;
    right: 0px;
    top: 150px;
    padding: 10px;
    position: relative;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.5); 
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.8); 
}

HTML：

<div id="main_right">
        <div id="news">News</div>
        <div id="news_info">
          <?php
          require('news/wp-blog-header.php');
          ?>
          <?php
          $posts = get_posts('numberposts=5&order=DES&orderby=date');
          foreach ($posts as $post) : setup_postdata( $post ); ?>
          <?php the_title('<h3>', '</h3>'); ?>
          <?php the_excerpt('<b3>', '</b3>'); ?>
          <br> 
          <?php
          endforeach;
          ?>
        </div>
</div>

非常感谢任何帮助，谢谢你们。

Answer 1

您需要将高度添加到<div id="news_info">才能使滚动条生效。

#news_info {
   overflow-x: auto;
   width: 265px;
   right: 0px;
   top: 150px;
   padding: 10px;
   position: relative;
   height: 322px;
}

Answer 2

只需将height: 330px;和overflow-x: hidden;添加到#news_info

即可

使用webkit进行滚动条格式化 - 滚动条未显示

2 个答案: