Skip to content

Instantly share code, notes, and snippets.

@bwindels

bwindels/overlay-scrollbar.html

Last active October 31, 2018 18:18
Show Gist options
  • Save bwindels/1576d0cdc57231f4a5507783dc2927dd to your computer and use it in GitHub Desktop.
Save bwindels/1576d0cdc57231f4a5507783dc2927dd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
overlay-scrollbar.html
<!DOCTYPE html>
<html>
<head>
<style>
.mx_hellolist {
height: 200px;
width: 300px;
background: salmon;
box-sizing: border-box;
}
.mx_hellolist li {
background: lightgreen;
margin: 5px;
border-radius: 5px;
padding: 5px;
}
</style>
</head>
<body>
<script type="text/javascript">
function getScrollbarWidth() {
var e = document.createElement('div'), sw;
e.style.position = 'absolute';
e.style.top = '-9999px';
e.style.width = '100px';
e.style.height = '100px';
e.style.overflow = 'scroll';
e.style.msOverflowStyle = '-ms-autohiding-scrollbar';
document.body.appendChild(e);
sw = (e.offsetWidth - e.clientWidth);
document.body.removeChild(e);
return sw;
}
const scrollbarWidth = getScrollbarWidth();
let classes = {};
if (scrollbarWidth !== 0) {
classes['.mx_scrollable'] = {
'overflow-y': 'hidden',
'padding-right': `${scrollbarWidth}px`,
};
classes['.mx_scrollable:hover'] = {
'overflow-y': 'auto',
'padding-right': `0`,
};
} else {
classes['.mx_scrollable'] = {
'overflow-y': 'auto',
'-ms-overflow-style': '-ms-autohiding-scrollbar',
};
}
const css = Object.entries(classes).reduce((css, [name, declarations]) => {
const declarationsString = Object.entries(declarations).map(([prop, value]) => {
return `${prop}:${value};`;
}).join('');
return css + `${name } { ${declarationsString} } `;
}, '');
const style = document.createElement('style');
style.type = 'text/css';
style.innerText = css;
document.head.appendChild(style);
</script>
<ul class="mx_scrollable mx_hellolist">
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
<li>hello hello</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment