0

I would like to display scrollbar inside container on content overflow like facebook notifications?

setting overflow:auto displaying scrollbar outside container.

How to render scrollbar outside container?

4

2 回答 2

2

你可以使用这个插件jQuery 自定义内容滚动器

在您的 html 文档的 head 标记中包含 jquery.mCustomScrollbar.css

<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);

演示

于 2013-05-18T09:11:13.773 回答
0

设置溢出应该处理它，但您还需要设置内容的高度。如果未设置高度属性，则 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 {
     浮动：对；
     高度：250px；
     宽度：250px；
     填充：3px；
     背景：#f00;
}

。内容 {
    高度：224px；
    溢出：自动；
    背景：#fff;
}

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

于 2013-05-18T09:06:54.963 回答