capsid-scroll-lock
v2.0.0
Published
Body Scroll Lock as capsid module
Downloads
18
Maintainers
kt3kReadme
capsid-scroll-lock v2.0.0
:clamp: Body Scroll Lock as capsid module :pill:
Usage
Install via npm:
npm i --save-dev capsid capsid-scroll-lockInstall it to capsid.
capsid.install(require('capsid-scroll-lock'))Then, add scroll-lock class to your body tag.
<body class="scroll-lock">
...
</body>Then dispatch capsid-scroll-lock/LOCK custom DOM event to lock the scroll of body and capsid-scroll-lock/UNLOCK event to unlock it.
document.body.dispatchEvent(new CustomEvent('capsid-scroll-lock/LOCK'))This locks the body scroll.
document.body.dispatchEvent(new CustomEvent('capsid-scroll-lock/UNLOCK'))The above unlocks the body scroll.
Those event names are available as LOCK and UNLOCK values from the module.
const { LOCK, UNLOCK } = require('capsid-scroll-lock')
console.log(LOCK) // => "capsid-scroll-lock/LOCK"
console.log(UNLOCK) // => "capsid-scroll-lock/UNLOCK"Example
If you use vanilla.js
const { LOCK, UNLOCK } = require('capsid-scroll-lock')
document.body.dispatchEvent(new CustomEvent(LOCK))
document.body.dispatchEvent(new CustomEvent(UNLOCK))If you use capsid.js
const { LOCK, UNLOCK } = require('capsid-scroll-lock')
const { component, emits } = require('capsid')
@component('my-component')
class MyComponent {
@emits(LOCK)
lockMethod () { ... }
@emits(UNLOCK)
unlockMethod () { ... }
}And put my-component somewhere in body
<body class="scroll-lock">
...
<div class="my-component">
</div>
...
</body>Then invoking lockMethod locks the body and unlockMethod unlocks the body.
API
const { install, LOCK, UNLOCK } = require('capsid-scroll-lock')install(capsid, { name })
- @param capsid - The capsid object
- @param {string} name - The name of scroll-lock class. Default
scroll-lock.
Installs the module to capsid.
require('capsid-scroll-lock').install(capsid, { name: 'my-scroll-lock' })Alternatively you can call it like:
capsid.install(require('capsid-scroll-lock'), { name: 'my-scroll-lock' })LOCK, UNLOCK
const LOCK = 'capsid-scroll-lock/LOCK'
const UNLOCK = 'capsid-scroll-lock/UNLOCK'These are custom event names for locking and unlocking the body scroll.
License
MIT