scroll-padlock
Version:
Locks elements scroll handling scrollbar gaps and iOS Safari with CSS variables
46 lines (34 loc) • 1.09 kB
HTML
<html>
<head>
<title>Test</title>
<style>
* {
box-sizing: border-box;
}
body {
font-size: 200px;
margin: 0;
}
body.locked {
position: fixed;
width: 100%;
top: calc(var(--scroll-padlock-scroll-top) * -1);
padding-right: var(--scroll-padlock-scrollbar-width);
}
</style>
</head>
<body>
<p>
Hello there, Lorem ipsum. How r u today?
</p>
<script src="../../dist/iife/scroll-padlock.js"></script>
<script>
window.cssClassNameBodyLocked = 'locked';
const { body } = document;
const { classList } = body;
window.instance = new window.ScrollPadlock(body, cssClassNameBodyLocked)
window.lock = () => classList.add(cssClassNameBodyLocked);
window.unlock = () => classList.remove(cssClassNameBodyLocked);
</script>
</body>
</html>