🗜️ Body Scroll Lock as capsid module 💊
Install via npm:
npm i --save-dev capsid capsid-scroll-lock
Install 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"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.
const { install, LOCK, UNLOCK } = require('capsid-scroll-lock')- @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' })const LOCK = 'capsid-scroll-lock/LOCK'
const UNLOCK = 'capsid-scroll-lock/UNLOCK'These are custom event names for locking and unlocking the body scroll.
MIT
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent