I am attempting to design a webpage where the scroll bar is hidden, but users can still scroll or click on links to navigate down the page. I have managed to hide the scroll bar, but I am facing an issue where the page jumps to 100% when scrolling. How can I resolve this? 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;}