Skip to content

Instantly share code, notes, and snippets.

@andxbes

andxbes/js.js

Last active July 5, 2024 08:54
Show Gist options
  • Save andxbes/11747ff231fc627e4cbc34b49cbe8929 to your computer and use it in GitHub Desktop.
Save andxbes/11747ff231fc627e4cbc34b49cbe8929 to your computer and use it in GitHub Desktop.
Download ZIP
--scrollbar-width
Raw
js.js
document.addEventListener('DOMContentLoaded', () => {
function getScrollBarWidth() {
let el = document.createElement("div");
el.style.cssText = "overflow:scroll; visibility:hidden; position:absolute;";
document.body.appendChild(el);
let width = el.offsetWidth - el.clientWidth;
el.remove();
return width;
}
document.body.style.setProperty('--scrollbar-width', `${getScrollBarWidth()}px`);
});
Raw
style.css
body{
--scrollbar-width: 0px;
}
.full-width{
width: calc(100vw - var(--scrollbar-width) /2);
max-width: calc(100vw - var(--scrollbar-width)/2);
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
box-sizing: border-box;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment