https://github.com/capsidjs/capsid-scroll-lock
:clamp: Body Scroll Lock as capsid module :pill:
https://github.com/capsidjs/capsid-scroll-lock
body body-scroll-lock capsid capsid-module scroll-lock
Last synced: 28 days ago
JSON representation
:clamp: Body Scroll Lock as capsid module :pill:
- Host: GitHub
- URL: https://github.com/capsidjs/capsid-scroll-lock
- Owner: capsidjs
- License: mit
- Created: 2018-04-04T05:47:56.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-03-07T11:46:43.000Z (over 6 years ago)
- Last Synced: 2025-06-06T15:04:58.462Z (about 1 year ago)
- Topics: body, body-scroll-lock, capsid, capsid-module, scroll-lock
- Language: JavaScript
- Homepage:
- Size: 107 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# capsid-scroll-lock v2.0.0
[](https://circleci.com/gh/capsidjs/capsid-scroll-lock)
[](https://codecov.io/gh/capsidjs/capsid-scroll-lock)
> :clamp: Body Scroll Lock as [capsid][] module :pill:
# Usage
Install via npm:
npm i --save-dev capsid capsid-scroll-lock
Install it to [capsid][].
```js
capsid.install(require('capsid-scroll-lock'))
```
Then, add `scroll-lock` class to your body tag.
```html
...
```
Then dispatch `capsid-scroll-lock/LOCK` custom DOM event to lock the scroll of `body` and `capsid-scroll-lock/UNLOCK` event to unlock it.
```js
document.body.dispatchEvent(new CustomEvent('capsid-scroll-lock/LOCK'))
```
This locks the body scroll.
```js
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.
```js
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
```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
```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
```html
...
...
```
Then invoking `lockMethod` locks the body and `unlockMethod` unlocks the body.
# API
```js
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.
```js
require('capsid-scroll-lock').install(capsid, { name: 'my-scroll-lock' })
```
Alternatively you can call it like:
```js
capsid.install(require('capsid-scroll-lock'), { name: 'my-scroll-lock' })
```
## LOCK, UNLOCK
```js
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
[capsid]: https://github.com/capsidjs/capsid