Question

我想在内容溢出时在容器内显示滚动条，如facebook通知？

设置overflow:auto在容器外显示滚动条。

如何在容器外渲染滚动条？

Answer 1

在头标记内包含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

Answer 2

设置溢出应该处理它，但你也需要设置内容的高度。如果未设置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/

如何在容器内显示滚动条？

2 个答案: