ScrollFreezer

Frost scroll event on window. A no-jumping javascript alternative to overflow:hidden.

Why

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.

Public Methods

// 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}

Usage

// 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()
}

Credits

Technique originally seen at facebook, at least that's what @fhilM said.

Based on philm SO answer 🙌