如何在容器內顯示滾動條？

Question

我想顯示滾動條內容溢出像Facebook通知容器內？

設置overflow:auto在容器外顯示滾動條。

如何渲染容器外的滾動條？

Answer 1

設置溢出應該照顧它，但你也需要設置內容的高度。如果height屬性沒有設置，div將垂直增長，並且不需要滾動條。

<div class="FixedHeightContainer"> 
    <h2>Title</h2> 
    <div class="Content"> 
    blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... 
    </div> 
</div> 

 
.FixedHeightContainer { 
    float:right; 
    height: 250px; 
    width:250px; 
    padding:3px; 
    background:#f00; 
} 

.Content { 
    height:224px; 
    overflow:auto; 
    background:#fff; 
} 

http://jsfiddle.net/ftkbL/1/

Answer 2

你可以使用這個插件jQuery custom content scroller

包括jquery.mCustomScrollbar.css頭標記您的HTML文檔中

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> 

包括jQuery庫

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="jquery.mCustomScrollbar.concat.min.js"></script> 

呼叫mCustomScrollbar

<script> 
(function($){ 
    $(window).load(function(){ 
     $(".content").mCustomScrollbar(); 
    }); 
})(jQuery); 

Demo