ollien/spectabular
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add scrollbar margin hack

Browse source
This commit is contained in:
Nick Krichevsky 2018-06-27 00:26:31 -04:00
parent 61e87dd764
commit 693e881dbb
1 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/ts/browser-action.ts
View file

@ -5,8 +5,20 @@ const MAIN_TEMPLATE_URI: string = chrome.runtime.getURL("twig/main.html.twig");
//Using the `as any` cast here because the @types/twig package is out of date and requires `url` rather than `href`
const MAIN_TEMPLATE: twig.Template = twig.twig({href: MAIN_TEMPLATE_URI, async: false} as any);
/**
* For whatever reason, Chrome puts a margin equal to the scrollbar width to the right of whatever element sets the width. Setting a negative margin equal to that width mitigates that.
*
* This is a complete hack.
*/
function fixScrollbarMargin(): void {
let html = document.querySelector("html");
let scrollbarWidth = html.clientWidth - html.offsetWidth;
html.style.marginRight = `${(-scrollbarWidth)}px`;
}
document.addEventListener("DOMContentLoaded", () => {
chrome.tabs.query({}, (tabs: chrome.tabs.Tab[]) => {
document.querySelector("body").innerHTML = String(MAIN_TEMPLATE.render({tabs}));
fixScrollbarMargin();
});
});