Skip to content

Instantly share code, notes, and snippets.

@philwolstenholme
Last active December 23, 2020 20:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save philwolstenholme/e781f988e3c23cd10da1972e4ad17b15 to your computer and use it in GitHub Desktop.
Save philwolstenholme/e781f988e3c23cd10da1972e4ad17b15 to your computer and use it in GitHub Desktop.
One example of working around the '100vw includes scrollbar width' issue
const width = window.innerWidth - document.documentElement.clientWidth;
const root = document.documentElement;
root.style.setProperty('--scrollbar-width', `${width}px`);
// This will prevent scrollbar issues fine for most cases.
body {
overflow-x: hidden;
}
// But you might find some cases where the above is not enough, for example…
--grid-gutter-width: calc((100vw - var(--container-max-width)) / 2);
//… will give incorrect results if a scrollbar is visible as the scrollbar width will be included in 100vw.
// To get around this issue, we can do something like this:
// For mobile-first, set this to 0, otherwise you could use 17px as that seems a common
// desktop scrollbar width (https://codepen.io/sambible/post/browser-scrollbar-widths).
--scrollbar-width: 0;
// Now we use calc and a custom property to subtract the scrollbar width from 100vw before we use its value:
--grid-gutter-width: calc(((100vw - var(--scrollbar-width)) - var(--container-max-width)) / 2);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment