Last active
July 2, 2018 12:52
-
-
Save HarryPhillips/f1d7f2b4c349a014041c28900bf8d5bc to your computer and use it in GitHub Desktop.
Userscript: Remove / Toggle scrollbars for Sizzy (https://github.com/kitze/sizzy)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name Toggle Sizzy Scrollbars | |
// @namespace http://tampermonkey.net/ | |
// @version 1.0 | |
// @description Removes scrollbars from Sizzy's iframes whilst providing a manual override button for each iframe too. | |
// @author Harry Phillips | |
// @match http://sizzy.co/* | |
// @grant none | |
// ==/UserScript== | |
(function() { | |
'use strict'; | |
var | |
// configure width of scrollbar for your browser, this value is what worked | |
// best with Vivaldi, which is Chrome based. | |
SCROLLBAR_WIDTH = 21, | |
// remove scrollbars by default? | |
SCROLLBAR_OFF_DEFAULT = true, | |
// selectors, these may change? | |
S_WRAPPERS = ".hzEJjj", | |
S_CONTROLS = ".hJSWmc", | |
// class names, these may change too? | |
C_BUTTON = "bUwDjg", | |
C_ICON = "jFTSbQ"; | |
document.querySelectorAll(S_WRAPPERS).forEach(function (wrapper) { | |
// this will keep track of the scrollbar state for the iframe | |
// underneath this wrapper | |
var SCROLLBAR_VISIBLE = true; | |
// hides scrollbar once its "pushed" outside of the box | |
wrapper.style.overflow = "hidden"; | |
var iframe = wrapper.querySelector("iframe"); | |
// hide the scrollbar immediately by default | |
if (SCROLLBAR_OFF_DEFAULT) { | |
toggleIframeWidth(iframe, SCROLLBAR_VISIBLE); | |
SCROLLBAR_VISIBLE = false; | |
} | |
// construct scrollbar fix button | |
var button = constructToggleButton(wrapper); | |
// and trigger iframe width adjustment and scrollbar state on click | |
button.addEventListener("click", function () { | |
toggleIframeWidth(iframe, SCROLLBAR_VISIBLE); | |
SCROLLBAR_VISIBLE = !SCROLLBAR_VISIBLE; | |
}); | |
}); | |
// toggles the width of a given iframe based on scrollbar visibility | |
function toggleIframeWidth(iframe, visible) { | |
var width = visible ? SCROLLBAR_WIDTH : -SCROLLBAR_WIDTH; | |
iframe.width = (parseFloat(iframe.width) + width) + "px"; | |
} | |
// will construct the scrollbar toggle button next to the settings | |
// and orientation buttons | |
function constructToggleButton(wrapper) { | |
var button = document.createElement("div"), | |
buttonIcon = document.createElement("span"), | |
buttonWrapper = wrapper.querySelector(S_CONTROLS); | |
button.title = "Toggle Scrollbar"; | |
button.className = C_BUTTON; | |
button.style.marginLeft = "5px"; | |
buttonIcon.className = "fa fa-arrows-v c-device__button-icon " + C_ICON; | |
button.appendChild(buttonIcon); | |
buttonWrapper.appendChild(button); | |
return button; | |
} | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment