How to Scroll Through a Div Without the Scrollbars Showing

Hide scroll bar, but while still being able to scroll

Just a test which is working fine.

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

Or

Using Position: absolute,

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

Information:

Based on this answer, I created a simple scroll plugin.

How to scroll a Div without a scroll bar?

Please don't do this! It will make the interface unusable because no one will no where the can scroll!

But if you must...

How to Hide Your Scrollbars

jsFiddle Example

CSS

#wrapper {
    width: 150px;
    overflow: hidden;
    outline: 1px solid blue;
}

#scroller {
    width: 170px;
    height: 100px;
    overflow: auto;
    background: yellow;
}

HTML

<div id="wrapper">
    <div id="scroller">
        foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
        foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
        foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>      
    </div>
</div>

How Can I scroll through a div without the scrollbars showing?

.myDiv {
  width: 200px;
  height:300px;
  overflow: scroll;
}

.wrapper {
  width: 183px;
  height: 283px;
  overflow: hidden;
  border: 1px solid black;
}

<div class="wrapper">
  <div class="myDiv">
    floating div content...
  </div>
</div>

This might work - basically you're placing a smaller div around the one you want and hiding the scroll bars.

CSS hide scroll bar, but have element scrollable

You can hide it:

html {
  overflow:   scroll;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

For further information, see: Hide scroll bar, but while still being able to scroll

Scroll content without scrollbar using CSS

You could kinda hack it cross-browser by expanding the width of the nav element and force scrollbars. Updated JSFiddle.

nav {
    position:relative;
    height:100%;
    width: 110%;         /*  <----   */
    overflow-x:hidden;
    overflow-y:scroll;   /*  <----   */
}

Of course, you'll want to adjust the percentage to your needs or use calc( 100% + 15px ).

CSS hide scroll bar if not needed

Set overflow-y property to auto, or remove the property altogether if it is not inherited.

Is there a way to never ever have a scroll bar on a div?

Yes, you can use overflow: hidden; and it will never show a scroll bar. Note that this might also disable scrolling (even with mouse wheel) in some browsers.

You can specify overflow-x: hidden; for horizontal or overflow-y: hidden; for vertical scrollbars.

How do I make the scrollbar on a div only visible when necessary?

Use overflow: auto. Scrollbars will only appear when needed.

(Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto).

Allow scroll but hide scrollbar

It's better, if you use two div containers in HTML .

As Shown Below:

HTML:

<div id="container1">
    <div id="container2">
        // Content here
    </div>
</div>

CSS:

 #container1{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

 #container2{
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 20px;
}