Hide scroll bar of nested div, but still make it scrollable [duplicate]

Answer 1

The solution to make the content itself with horizontal scroll.

Just increase the height of #main, and #content.

#main {
    width: 500px;
    height: 520px;

}

#sub-main {
    overflow: hidden;

}

#content {
    background-color: red;
    width: 500px;
    height: 520px;
    overflow: auto;

}

#item-container {
    width: 1500px;
    height: 500px;
    overflow: hidden;
}

.item {
    width: 500px;
    height: 500px;
    font-size: 25em;
    text-align: center;
    float: left;
}

Answer 2

1. Use a script to create custom scrollbars.

http://manos.malihu.gr/jquery-custom-content-scroller/

1. Then use CSS(or modify script or change script config) to hide the custom scrollbars.

Answer 3

I did this crudely using jQuery and your example

Check this fiddle:

I simply detected the direction of the scroll-wheel and pushed the horiz-scroll bar with jQuery

$(document).ready(function(){
    $('#content').bind('mousewheel', function(e){
        var curScroll = $("#content").scrollLeft();
        if(e.originalEvent.wheelDelta > 0) {            
            $("#content").scrollLeft(curScroll-500);
        } else {
            $("#content").scrollLeft(curScroll+500);
        }
    });
});

It is "crude" because I hard-coded some values like the 500px amount to scroll, you could write some more javascript to detect dynamically how much to scroll. Plus I don't know if the wheelDelta value will be +120 for up and -120 for down, for you and other users.

Also note that the scrolLeft() can be animated.. for smoother transitions.

Answer 4

Theory :

The technique is to use a parent container that is shorter than the child element with scrollbar. This image shows what I mean :

Practice :

In your case, I suggest using absolute positionning and negative bottom value on #project-content so it overflows it's parent container (#projects) at the bottom.

The point is now what negative value? It should be the same value as the with of a scroll but scrollbars are never the same width according to browsers. So I suggest giving a bigger value : -30pxto be sure it is hidden. You will just need to be carefull that you don't have content to close to the bottom that can be hidden on browesers with thin scrollbars.

This is the CSS you should add to your website :

#projects{
    position: relative;
}

#project-content{
    position: absolute;
    top: 0;
    left: 20%;
    bottom: -30px;
    /* remove: 
        height: 100%; 
        position: relative; 
        float: left; 
        padding-bottom: -15px
    /*
}

Answer 5

It's kind of cheating but could you hide it behind the #content like this DEMO

#content {
    background-color: red;
    width: 500px;
    height: 480px;
    overflow: hidden;
}

#item-container {
    width: 1500px;
    height: 500px;
    overflow: scroll;
}

Answer 6

I basicly add padding:0 1em 1em 0; to the element where it is supposed to be hidden , this hides both scrollbars if parent has overflow: hidden. tune padding-bottom or only padding-right, if it is to hide only one of them.

1em is average width of scroll bars in most browsers : http://jsfiddle.net/5GCsJ/912/