scroll-freezer
Frost scroll event on window. A no-jumping javascript alternative to overflow:hidden.
Last updated a year ago by renatodeleao .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install scroll-freezer 
SYNC missed versions from official npm registry.

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 ????

Current Tags

  • 1.0.5                                ...           latest (a year ago)

5 Versions

  • 1.0.5                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 6
Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |