scroll-blocker

1.0.1 • Public • Published

ScrollBlocker : disable the scrollbar

use case :

  • for a Modal Box

Configuration

import { disableScroll, enableScroll } from "scroll-blocker";

// disable scroll for BODY element
disableScroll();
enableScroll();

// disable scroll for #container element
let targetElement = document.querySelector("#container");
disableScroll(targetElement);
enableScroll(targetElement);

with Vue3

import { createApp } from "vue";
import { scrollLockDirective } from "scroll-blocker/scroll-lock-directive";
import App from "./App.vue";

const app = createApp(App);
app.directive("scroll-lock", scrollLockDirective);
app.mount(document.querySelector("#app"));
<!-- note that the target element is not the FileManager but
the #el-to-lock or document.body if no value -->
<file-manager v-scroll-lock:active />
<file-manager v-scroll-lock:active="'#el-to-lock'" />

TODO: for the moment does not manage the change of state.

<file-manager v-scroll-lock:[isActive] />
<file-manager v-scroll-lock:[isActive]="'#el-to-lock'" />

Readme

Keywords

none

Package Sidebar

Install

npm i scroll-blocker

Weekly Downloads

0

Version

1.0.1

License

ISC

Unpacked Size

3.25 kB

Total Files

4

Last publish

Collaborators

  • lhapaipai