Skip to content

πŸ™ˆπŸ™‰πŸ™Š - the best way to scope a scroll, or literally any other event.

License

Notifications You must be signed in to change notification settings

thearnica/dom-locky

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

9 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

dom-locky

CircleCI status Greenkeeper badge npm

NPM

πŸ™ˆLoki - is God of Mischief, Madness and Evil!

πŸ™‰Locky - is God of Locks, Event capturing and Stealing. Small and very slender brother - just 1kb.

πŸ™ŠLocky will never let event escape the target node, will prevent scrolls outside, will do the HTML5 inert job.

Locky will completely disable any user iterations outside of nested children.

And it has a twin-brother - react-locky

import {lockyOn} from 'dom-locky';

const unlock = lockyOn('.modal', extraProps);
const unlock = lockyOn(myElement, { onEscape: callback });
//......
unlock();

Unpkg

You may also include this library from unpkg as https://unpkg.com/dom-locky. Then locky will be available as locky global variable.

API

Locky accepts selector or HTMLElement as a first argument, and locky will be activated only on the first element matching selector Locky accepts a settings as a second argument

  • onEscape, will be triggered when someone will try "escape" the lock. See "report" events below
  • noDefault[=false], disables all "default" events
  • events[=defaultEvents], DOM events to manage
  • group[=null], focus group id. Locks with the same group will not block each other.

Default events

  • click: 'report' (will call onEscape)
  • mousemove: true,
  • mousedown: 'report' (will call onEscape)
  • touchmove: true,
  • touchstart: 'report' (will call onEscape)
  • keydown: true,
  • focus: false, (focus is unblockable)
  • change: false,
  • scroll: true, (scroll is handled separately)
  • wheel: true,

Focus

Locky could not propely handle focus events, and will let it get out of the form, and will block attemps to return it, as long they will have source out of the lock. To scope a focus use dom-focus-lock

Tip

important tip for Mobile Safary - while normal "touch move" will scroll "scrollable" container, touch+move started on inputs will start drag-n-drop and cause whole layer(modal/page) scroll. (it will just scroll as a πŸ’©, or not scroll at all).

To disable this behavior - apply -webkit-overflow-scrolling: touch; on the page.

Licence

MIT

About

πŸ™ˆπŸ™‰πŸ™Š - the best way to scope a scroll, or literally any other event.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published