CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1834809
user1834809

Reputation: 1311

how to display scrollbar inside container?

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?

Upvotes: 0

Views: 375

Answers (2)

SivaRajini
SivaRajini

Reputation: 7375

Setting the overflow should take care of it, but you need to set the height of content also. If the height attribute is not set, the div will grow vertically as tall as it needs to, and scrollbars wont be needed.

<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/

Upvotes: 0

Mahmoude Elghandour
Mahmoude Elghandour

Reputation: 2931

You can use this plugin jQuery custom content scroller

Include jquery.mCustomScrollbar.css inside the head tag your html document

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

Include jQuery library

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

call mCustomScrollbar

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

Demo

Upvotes: 2

Related Questions