umidjons/no-browser-scrollbar.md

## no-browser-scrollbar.md

      
    Raw
  

              no-browser-scrollbar.md
            
          
    Hide browser's scrollbars, but be able to scroll

My HTML structure was as following (I've used twitter bootstrap):
<body>
  <div class="container">
  	<!-- long content -->
  </div>
</body>
To hide scrollbars  I've used this CSS code:
body{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.container{
	overflow: auto;
}
Original code was as this in jsFiddle:
<div id="container1">
  <div id="container2">
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    good<br/>bye.
  </div>
<div>
#container1{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#container2{
    width: 100%;
    height: 99%;
    overflow: auto;
}

html, body{
    height: 100%;
    overflow: hidden;
}
No results found