Navigating discreetly with invisible scroll bar

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;}

Answer №1

Enhance the appearance of the scroll bar without affecting the surrounding elements.

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

For further details, check out: http://css-tricks.com/custom-scrollbars-in-webkit/.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Maintaining the order of subscribers during asynchronous operations can be achieved by implementing proper synchronization

In my Angular setup, there is a component that tracks changes in its route parameters. Whenever the params change, it extracts the ID and triggers a function to fetch the corresponding record using a promise. Once the promise resolves, the component update ...

"Learn the process of connecting an HTML5 element to Angular 2 source code while in a saving mode

In this Angular2 implementation, I have created some HTML code for user access. However, I am facing an issue where the data is not binding at the Angular2 source code side. HTML Code <form class="form-horizontal" novalidate [formGroup]="EmployeeForm" ...

Troubles with basic jQuery hide and show functionalities

Hey there! I've been working on a project for the past couple of days and I'm having trouble with creating a slider effect using jQuery hide and show. It's strange because my code works perfectly fine with jquery-1.6.2.min.js, but when I swi ...

Maintain parent hover effect while child is being hovered over

After exploring various solutions to fix an issue, I've hit a roadblock. Adding CSS and jQuery code seemed promising at first, but upon refreshing the browser, a new problem emerged. The parent element retained its hover state background color, but th ...

Utilizing Javascript in Spotfire for enhanced functionality

Currently, I have a dropdown menu with two options ("START" & "END"). Depending on the selected value from this dropdown, I want to display a specific DIV element. I attempted to use the code below, but unfortunately, it is not functioning as expected ...

Can Mongoose be integrated into a Next.js API environment?

My current project involves creating a website for my sister to showcase and sell her artwork. Utilizing Next.js, I have set up the framework where the website displays the artwork by fetching an array from a database and iterating through it. Let's ...

Tips for utilizing ion view within an ionic 2 application

In my original use of Ionic 1, I placed the footer after the <ion-content> and before . However, in the new Ionic 2, I can't seem to find any reference to <ion-view>. My specific need is to have two buttons at the bottom of the screen fol ...

What is the most efficient method for retrieving data upon form submission in Next.js?

When using the provided code and Metadata-scraper to retrieve meta data from a URL, I can do so successfully when it's hardcoded. However, I'm looking for guidance on how to allow users to input a link via a text field and fetch the meta data upo ...

Compatibility of Typescript with local storage

Can Typescript interact with local storage in any way? I have been setting items using the following code: localStorage.setItem('someString', JSON.stringify(MyTypescriptObject)); This method stores the object as a plain string. For example: ...

Controller experiencing issues with Ajax passing null value

My webpage features a dropdown menu with a list of ID's to choose from. When a customer selects an option, it should update the price total displayed on the page. To achieve this functionality, I'm working on implementing an AJAX call that will u ...

Is there a way to retrieve two arrays in an Ajax request?

JAVASCRIPT CODE: $.ajax({ url: 'assignavailtrainers.php', data: {action:'test'}, type: 'post', success: function(data) { } }); PHP CODE: <?php $username = "trainerapp"; ...

Why isn't my watch function functioning properly within Vue?

In my JS file, I have two components. The file starts with this line: const EventBus = new Vue(); I am trying to pass two strings, 'username' and 'password', from the first component to the second component, but it's not working. ...

Verifying whether every value in the X array is present in the Y array or not

Currently, I am working with two arrays: const arrA = [1, 2, 3, 4, 5]; const arrB = [1, 2, 3, 4, 5, 6, 7, 8, 9]; My goal is to determine if all elements in array A exist in array B. Here are a few scenarios for better clarity: const arrA = [1, 2, 3, 4, ...

List the attributes that have different values

One of the functions I currently have incorporates lodash to compare two objects and determine if they are identical. private checkForChanges(): boolean { if (_.isEqual(this.definitionDetails, this.originalDetails) === true) { return false; ...

Is it possible to conceal a link once it has been visited?

I am trying to figure out how to remove a link from a page once it has been visited. However, I am facing privacy restrictions with the :visited pseudo-class. Is there a way to achieve this without using display: none? For example: .someclass a:link {dis ...

Adjust the size of the div to match its parent's size when resizing

Can a div be resized to match its parent's size on window resize? Here is the current HTML code: <div class="sliderContainer"> <div id="cyler"> <div class="cy1" style="background-image:url(images/Keggy_Banner_Ie.jpg); back ...

The Bootstrap 4 alignment class for centering rows is not functioning as expected

<div class="row align-items-center remember"> <input type="checkbox" class="form-control" checked>Remember Me </div> <div class="row align-items-center"> <input type=& ...

"Create a sleek design with CSS background stripes featuring 1px of white alternating with transparent sections

Despite reviewing numerous CSS background stripe tutorials, I have been unable to find a solution to my specific dilemma. How can I achieve a design with diagonal white lines that are only 1px wide alternating with transparent stripes that are approximatel ...

Is the "sizes" attribute of the "picture" element functional in Chrome when it comes to <source>?

The incredible <picture> element has been functioning flawlessly in the Chrome browser for well over a year, yet regrettably, I seem to be encountering an obstacle when attempting to make use of the powerful sizes attribute within the <source> ...

Optimal strategies for initializing Knockout JS models from backend code

Upon taking over a website that utilizes knockout js and asp.net, I noticed some performance issues during the initial page load. After investigating, I found that there are approximately 20 models on the site, each making an ajax call to retrieve data fro ...