Scrollbar In One Div Only

Question

Say, for example, I have two divs like so:

MY OTHER CONTENTS <

Solution 1:

Do you want to do something like that?

jsfiddle Example 1

I edited your jsfiddle and removed some of the not needed parts for your question:

edited version of your jsfiddle

seems like there was a

</div>

missing in the #header, but is that what you wanted to get?

Solution 2:

Is this what you had in mind?

This is a simple method. I have the header at the top, absolutely positioned, at a height of 100 pixels. Below that, I have the main content area, which has a height of 100%, a transparent top border of 100 pixels (so the content appears below the absolutely positioned header).

The box-sizing property in CSS allows us to fit the entire element into the width and height we specify, including padding and borders. So including the top border, the height of the main content is 100%, and the scrollbar appears only on the main content div.

The trick here, by the way, is setting the height of both html and body to 100%. This wouldn't work otherwise.

CSS:

html,body {
    height:100%;
}
#header {
    position:absolute;
    width: 100%;
    height: 100px;
    background:#c3c3c3;
    z-index:1;
}
#main {
    background: #eee;
    height:100%;
    border-top:100px solid transparent;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    overflow:auto;
}

Here is your fiddle using my solution.

Solution 3:

Try:

#div2 {
  overflow-y: scroll;
}

That will only put the scrollbars when needed. To always display them use overflow-y: scroll;. I had prefixed the second div's ID with div as you should not use only numbers for IDs or attributes in general.

The # signifies that the rule will apply to an element with the ID that follows the #. If you wanted it applied to all div then you would use a class instead.

Demo: http://jsfiddle.net/6EVtN/

Without seeing more code, the issue could be due to browser compatibility. Example above was tested in Mozilla Firefox 13.0.1 and IE 8.

Updated Demo: http://jsfiddle.net/j4uAM/

Solution 4:

Ok, I solved my problem, I used this code:

body{
overflow: hidden;
}
#main{
overflow: scroll;
}
#maincontent{
height: 1500px;
}

I specified the height in content of #main and it just worked, thanks to everybody!

Solution 5:

This a perfect solution, but I don't know how to keep code format in stackoverflow:

<script>
$("#cart").bind("mousewheel", function(e){
var intElemScrollHeight = document.getElementById("cart").scrollHeight;
var intElemClientHeight = document.getElementById("cart").clientHeight;
if( intElemScrollHeight - $("#cart").scrollTop() === intElemClientHeight) {
    $(document).bind("mousewheel", function(event) {
        event.preventDefault();
    });
}
if(e.originalEvent.wheelDelta /120 > 0 ) {
    if($("#cart").scrollTop() != 0) {
        $(document).unbind("mousewheel"); 
    } else {
        event.preventDefault();
    }
}});
$("#cart").on("mouseleave", function(event) {
   $(document).unbind("mousewheel");
});
</script>

Html5 Lite