-1

I try to create a page where scroll bar is hidden but you still can scroll or click on links to scroll down. I can hide scroll bar but I can't scroll with leaving a page on 100%. Html

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="content1">Hello</div>
<div id="content2">Hello2</div>
<div id="content3">Hello3</div>
<div id="content4">Hello4</div>
    <div id="links">
    <a href="#content1" class="contentLink">link 1</a> |
    <a href="#content2" class="contentLink">link 2</a> |
    <a href="#content3" class="contentLink">link 3</a> |
    <a href="#content4" class="contentLink">link 4</a>
    </div>
    </div>
    </body>
    </html>

Css

    #container, #content1, #content2, #content3, #content4 {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
z-index: 1;
overflow:hidden}
#content1 { top: 0%; background: yellow; }
#content2 { top: 100%; background: red; }
#content3 { top: 200%; background: orange; }
#content4 { top: 300%; background: purple; }
#links {
position: fixed;
bottom: 10px; left: 10px;
z-index: 2;}
user3026318
  • 27
  • 6
  • 1
    [Did](http://stackoverflow.com/questions/1326570) [you](http://stackoverflow.com/questions/16670931) [tried to](http://stackoverflow.com/questions/15985020) [search for](http://stackoverflow.com/questions/13317364/) [it](http://stackoverflow.com/questions/3293650/)? – totymedli Dec 02 '13 at 01:37
  • +1 for the "you" link. – Brendan Dec 02 '13 at 01:39
  • There are not what I am looking for. I am looking for scrolling down with no scrolling bar an with no borders(100% width and 100% height) and with methods for all browsers, I heard that I can do it in js. – user3026318 Dec 02 '13 at 01:47

1 Answers1

1

Just style the scroll bar, not the elements.

::-webkit-scrollbar,::-webkit-scrollbar-button,::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece,::-webkit-scrollbar-thumb,::-webkit-scrollbar-corner,::-webkit-resizer
{opacity:0; }

More info here: http://css-tricks.com/custom-scrollbars-in-webkit/.

Minifyre
  • 510
  • 2
  • 5
  • 17