v3-scroll-lock

A scroll lock tool for Vue 3. Works fine on all devices (and browsers). Uses body-scroll-lock under the hood. Designed by analogy with v-scroll-lock, but intended for Vue 3.

Demo

You're welcome to see how it works by clicking on the following link — https://bcastlel.github.io/v3-scroll-lock/

Installation & Setup

NPM

1npm install v3-scroll-lock

Yarn

1yarn add v3-scroll-lock

After installation, you have to use the plugin you've just installed in main.js (or main.ts).

1import { createApp } from 'vue';
2import App from './App.vue';
3import V3ScrollLock from 'v3-scroll-lock';
4
5createApp(App).use(V3ScrollLock, {})
6  .mount('#app');

You can also pass body-scroll-lock options on your own, they will be applied by certain members of the tool.

1import { createApp } from 'vue';
2import App from './App.vue';
3import V3ScrollLock from 'v3-scroll-lock';
4
5createApp(App).use(V3ScrollLock, { reserveScrollBarGap: true })
6  .mount('#app');

Usage

Now you are able to lock the scroll using the directive and, if you want, the functions.

The v-scroll-lock directive

When the value of the directive is set to true, the scroll will be locked on all elements except the element the directive is bound to.

Vue 3 Options API

1<template>
2  <div v-if="isOpen" class="modal">
3    <button @click="close">
4      X
5    </button>
6    
7    <div v-scroll-lock="isOpen" class="modal__content">
8      <p class="paragraph">
9        Sunt dolore magnam, distinctio numquam tenetur doloremque unde animi iure deleniti vero. Architecto omnis, impedit nesciunt est, ipsa nulla et possimus tempore aut neque voluptatem? Rerum laboriosam tempore eum vitae labore repellendus architecto nobis odio.
10      </p>
11    </div>
12  </div>
13</template>
14 
15<script>
16export default {
17  name: 'ModalComponent',
18  data() {
19    return {
20      isOpen: false,
21    };
22  },
23  methods: {
24    open() {
25      this.isOpen = true;
26    },
27    close() {
28      this.isOpen = false;
29    },
30  },
31};
32</script>

Vue 3 Composition API & TypeScript

1<template>
2  <div v-if="isOpen" class="modal">
3    <button @click="close">
4      X
5    </button>
6    
7    <div v-scroll-lock="isOpen" class="modal__content">
8      <p class="paragraph">
9        Sunt dolore magnam, distinctio numquam tenetur doloremque unde animi iure deleniti vero. Architecto omnis, impedit nesciunt est, ipsa nulla et possimus tempore aut neque voluptatem? Rerum laboriosam tempore eum vitae labore repellendus architecto nobis odio.
10      </p>
11    </div>
12  </div>
13</template>
14 
15<script lang="ts" setup>
16import { ref } from 'vue';
17
18const isOpen = ref(false);
19
20const open = (): void => {
21  isOpen.value = true;
22};
23
24const close = (): void => {
25  isOpen.value = false;
26};
27
28defineExpose({ open, close });
29</script>

The functions

This tool exposes 3 functions that you can use declaratively in your own way.

1. lockScroll: (element: Element, bodyScrollOptions?: BodyScrollOptions) => void
   By default, the options you passed during setup are applied.

2. unlockScroll: (element: Element) => void

3. unlockAllScrolls: () => void

1<template>
2  <div v-if="isOpen" class="modal">
3    <button @click="close">
4      X
5    </button>
6    
7    <div ref="content" class="modal__content">
8      <p class="paragraph">
9        Sunt dolore magnam, distinctio numquam tenetur doloremque unde animi iure deleniti vero. Architecto omnis, impedit nesciunt est, ipsa nulla et possimus tempore aut neque voluptatem? Rerum laboriosam tempore eum vitae labore repellendus architecto nobis odio.
10      </p>
11    </div>
12  </div>
13</template>
14 
15<script>
16import { lockScroll, unlockScroll } from 'v3-scroll-lock';
17
18export default {
19  name: 'ModalComponent',
20  data() {
21    return {
22      isOpen: false,
23    };
24  },
25  methods: {
26    open() {
27      this.isOpen = true;
28
29      this.$nextTick(() => {
30        lockScroll(this.$refs.content);
31      });
32    },
33    close() {
34      this.isOpen = false;
35      
36      unlockScroll(this.$refs.content);
37    },
38  },
39};
40</script>