A simple working scroll bar for your HTML website.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
pixelcode c6f893a6b2 updated scroll() in README 4 months ago
README.md updated scroll() in README 4 months ago
index.html new file: index.html 4 months ago
script.js modified: script.js 4 months ago
style.css new file: index.html 4 months ago

README.md

SimpleScrollBar

A simple, working scroll bar for HTML websites.

How it works

As soon as the user scrolls down, the yellow scroll bar extends to the right. Scrolling up makes it collapse to the left.

The scroll bar consists of 2 divs:

<div id="progress-container" class="progress-container">
    <div class="progress-bar" id="myBar"></div>
</div>

Scrolling calls the scroll() function

window.onscroll = function() {scroll()};

This is the actual scroll() function:

function scroll() {
	var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
	var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
	var scrolled = (winScroll / height) * 100;
	document.getElementById("myBar").style.width = scrolled + "%";
	document.getElementById('progress-container').span = '';
	document.getElementById('progress-container').span.title = scrolled;
}

License

Just use SimpleScrollBar on your website, no permission needed 😎