Hide Scrollbars in Firefox
// ==UserScript==
// @name Firefox Hide Scrollbars
// @namespace http://qashto.com/
// @version 2.1.8
// @description Hide Scrollbars in Firefox
// @author qashto
// @match *://*/*
// @exclude *://accounts.google.com/*
// @run-at document-start
// @grant GM_addStyle
// ==/UserScript==
console.log('hiding scrollbars...');
// if used as userscript add style with GM_addStyle
if (typeof GM_addStyle !== 'undefined') {
GM_addStyle(`
:root {
--scrollbar-height: 0;
--scrollbar-width: 0;
height: 100vh !important;
overflow: hidden !important;
position: relative !important;
width: 100vw !important;
}
:root,
body {
max-height: initial !important;
max-width: initial !important;
min-height: initial !important;
min-width: initial !important;
position: relative;
}
body {
height: calc(100vh + var(--scrollbar-height)) !important;
overflow: auto !important;
width: calc(100vw + var(--scrollbar-width)) !important;
}
`);
}
/**
* Compatibility with userscripts. Userscripts run in a different context to
* content scripts and don't need to make structured clones to pass objects
* to page scripts.
*/
if (!exportFunction && !cloneInto) {
function exportFunction(func, targetScope, options = {}) {
if (options.defineAs) {
targetScope[options.defineAs] = func;
}
return func;
}
function cloneInto(obj) {
return obj;
}
window.wrappedJSObject = window;
// Userscript-specific definition of document getters/setters
let documentScrollHandler;
Object.defineProperties(Document.prototype, {
scrollingElement: {
get() {
return document.body;
}
},
onscroll: {
get() {
return documentScrollHandler;
},
set(listener) {
if (documentScrollHandler) {
document.body.removeEventListener("scroll", documentScrollHandler);
}
if (listener) {
documentScrollHandler = listener;
document.body.addEventListener('scroll', documentScrollHandler);
}
}
}
});
} else if (browser && browser.runtime && browser.runtime.id) {
/**
* getters/setters cannot be passed via structured clone, so we have to inject
* a script into the page context.
*/
const scriptElement = document.createElement("script");
scriptElement.src = browser.runtime.getURL("js/pageContext.js");
scriptElement.addEventListener("load", () => {
scriptElement.remove();
});
document.documentElement.appendChild(scriptElement);
}
function getScrollbarSize() {
const div = document.createElement('div');
div.style.visibility = 'hidden';
div.style.overflow = 'scroll';
document.documentElement.appendChild(div);
const scrollbarHeight = div.offsetHeight - div.clientHeight;
const scrollbarWidth = div.offsetWidth - div.clientWidth;
div.remove();
return [
scrollbarWidth,
scrollbarHeight
];
}
document.addEventListener('DOMContentLoaded', () => {
const [scrollbarWidth, scrollbarHeight] = getScrollbarSize();
document.body.style.setProperty(
'--scrollbar-height', `${scrollbarHeight}px`);
document.body.style.setProperty(
'--scrollbar-width', `${scrollbarWidth}px`);
document.body.addEventListener('scroll', ev => {
const scrollLeft = cloneInto(document.body.scrollLeft, window);
const scrollTop = cloneInto(document.body.scrollTop, window);
window.wrappedJSObject.scrollX = scrollLeft;
window.wrappedJSObject.pageXOffset = scrollLeft;
window.wrappedJSObject.scrollY = scrollTop;
window.wrappedJSObject.pageYOffset = scrollTop;
});
exportFunction(document.body.scroll.bind(document.body), window, {
defineAs: 'scroll'
});
exportFunction(document.body.scrollTo.bind(document.body), window, {
defineAs: 'scrollTo'
});
exportFunction(document.body.scrollBy.bind(document.body), window, {
defineAs: 'scrollBy'
});
});
function handleAddScrollEvent() {
if (arguments[0] === 'scroll') {
document.body.addEventListener(...arguments);
return;
}
}
function handleRemoveScrollEvent() {
if (arguments[0] === 'scroll') {
document.body.removeEventListener(...arguments);
return;
}
}
const initial_windowAddEventListener = Window.prototype.addEventListener;
const initial_windowRemoveEventListener = Window.prototype.removeEventListener;
const initial_documentAddEventListener = Document.prototype.addEventListener;
const initial_documentRemoveEventListener = Document.prototype.removeEventListener;
function windowAddEventListener() {
handleAddScrollEvent(...arguments);
initial_windowAddEventListener.apply(this, arguments);
}
function windowRemoveEventListener() {
handleRemoveScrollEvent(...arguments);
initial_windowRemoveEventListener.apply(this, arguments);
}
function documentAddEventListener() {
handleAddScrollEvent(...arguments);
initial_documentAddEventListener.apply(this, arguments);
}
function documentRemoveEventListener() {
handleRemoveScrollEvent(...arguments);
initial_documentRemoveEventListener.apply(this, arguments);
}
exportFunction(windowAddEventListener, Window.prototype, {
defineAs: 'addEventListener'
});
exportFunction(windowRemoveEventListener, Window.prototype, {
defineAs: 'removeEventListener'
});
exportFunction(documentAddEventListener, Document.prototype, {
defineAs: 'addEventListener'
});
exportFunction(documentRemoveEventListener, Document.prototype, {
defineAs: 'removeEventListener'
});
console.log('scrollbars hidden!');