使用webkit的滾動條格式化 - 滾動條不顯示

所以標題說明了一切，我使用webkit格式化了我的滾動條，我的格式看起來不錯，但必須將父div設置爲溢出：隱藏以停止滾動條孩子div填補父母，但現在酒吧已經消失。使用webkit的滾動條格式化 - 滾動條不顯示

網頁有問題：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>

任何幫助將不勝感激，謝謝你們。

來源

2014-01-09 TristanD27

您需要將高度添加到<div id="news_info">以使滾動條工作。

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

來源

2014-01-09 16:54:30 Morpheus

謝謝，已經解決了這個問題，我會+1，如果我有足夠的代表。 – TristanD27

很高興能幫到您:) – Morpheus

@ TristanD27以您的名義代替 –

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

來源

2014-01-09 17:02:27 Mike

使用webkit的滾動條格式化 - 滾動條不顯示

回答

相關問題