Frost scroll event on window. A no-jumping javascript alternative to overflow:hidden.
What's the probelem with overflow:hidden
? Well if people have their browsers
defaulting to show scrollbars (not overlayed fancy ghost ones like mac/safari)
content will jump to right when overflow is applied. It's kind of ugly/janky.
// assuming an instance
const myScrollFreezer = new ScrollFreezer('body');
Method | Description |
---|---|
myScrollFreezer.freeze() |
Locks scroll. Sets isFrozen=true |
myScrollFreezer.defrost() |
Unlocks scroll. Sets isFrozen=false |
myScrollFreezer.toggleFreeze() |
toggle state between frozeen and defrosted |
myScrollFreezer.getState() |
returns an state Object . {isFrozen: bool, curScrollLockPos: number} |
// Instanciate
var bodyScrollFreezer = new ScrollFreezer('body');
// starts at false
document.querySelector('.someTrigger').addEventListener('click', function(){
bodyScrollFreezer.toggleFreeze();
}, false);
/*
* Manual verfication Example
*/
var isFrozen = bodyScrollFreezer.getState().isFrozen;
if (isFrozen){
bodyScrollFreezer.defrost()
} else {
bodyScrollFreezer.freeze()
}
Technique originally seen at facebook, at least that's what @fhilM said.
Based on philm SO answer 🙌