Adds a scroll percentage bar and text to the top of the page
// ==UserScript==
// @name Scroll Percentage Bar with Text
// @version 20240709
// @description Adds a scroll percentage bar and text to the top of the page
// @author jamesdeluk
// @match *://*/*
// @grant none
// @namespace https://greasyfork.org/users/242246
// ==/UserScript==
(function() {
'use strict';
// Create the bar element
var progressBar = document.createElement('div');
progressBar.style.position = 'fixed';
progressBar.style.top = '0';
progressBar.style.left = '0';
progressBar.style.width = '0%';
progressBar.style.height = '5px';
progressBar.style.backgroundColor = '#00aaff';
progressBar.style.zIndex = '10000';
progressBar.style.transition = 'width 0.25s ease-out';
document.body.appendChild(progressBar);
// Create the percentage text element
var progressText = document.createElement('div');
progressText.style.position = 'fixed';
progressText.style.top = '5px';
progressText.style.right = '0';
progressText.style.padding = '5px';
progressText.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
progressText.style.color = 'white';
progressText.style.zIndex = '10000';
progressText.style.fontFamily = 'Arial, sans-serif';
progressText.style.fontSize = '12px';
document.body.appendChild(progressText);
// Update the width of the bar and the text on scroll
window.addEventListener('scroll', function() {
var scrollTop = window.scrollY || document.documentElement.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrollPercent = (scrollTop / scrollHeight) * 100;
progressBar.style.width = scrollPercent + '%';
progressText.textContent = Math.round(scrollPercent) + '%';
});
})();