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.
You're welcome to see how it works by clicking on the following link — https://bcastlel.github.io/v3-scroll-lock/
npm install v3-scroll-lockyarn add v3-scroll-lockAfter installation, you have to use the plugin you've just installed in main.js (or main.ts).
import { createApp } from 'vue';
import App from './App.vue';
import V3ScrollLock from 'v3-scroll-lock';
createApp(App).use(V3ScrollLock, {})
.mount('#app');You can also pass body-scroll-lock options on your own, they will be applied by certain members of the tool.
import { createApp } from 'vue';
import App from './App.vue';
import V3ScrollLock from 'v3-scroll-lock';
createApp(App).use(V3ScrollLock, { reserveScrollBarGap: true })
.mount('#app');Now you are able to lock the scroll using the directive and, if you want, the functions.
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.
<template>
<div v-if="isOpen" class="modal">
<button @click="close">
X
</button>
<div v-scroll-lock="isOpen" class="modal__content">
<p class="paragraph">
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.
</p>
</div>
</div>
</template>
<script>
export default {
name: 'ModalComponent',
data() {
return {
isOpen: false,
};
},
methods: {
open() {
this.isOpen = true;
},
close() {
this.isOpen = false;
},
},
};
</script><template>
<div v-if="isOpen" class="modal">
<button @click="close">
X
</button>
<div v-scroll-lock="isOpen" class="modal__content">
<p class="paragraph">
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.
</p>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const isOpen = ref(false);
const open = (): void => {
isOpen.value = true;
};
const close = (): void => {
isOpen.value = false;
};
defineExpose({ open, close });
</script>This tool exposes 3 functions that you can use declaratively in your own way.
-
lockScroll: (element: Element, bodyScrollOptions?: BodyScrollOptions) => void
By default, the options you passed during setup are applied. -
unlockScroll: (element: Element) => void -
unlockAllScrolls: () => void
<template>
<div v-if="isOpen" class="modal">
<button @click="close">
X
</button>
<div ref="content" class="modal__content">
<p class="paragraph">
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.
</p>
</div>
</div>
</template>
<script>
import { lockScroll, unlockScroll } from 'v3-scroll-lock';
export default {
name: 'ModalComponent',
data() {
return {
isOpen: false,
};
},
methods: {
open() {
this.isOpen = true;
this.$nextTick(() => {
lockScroll(this.$refs.content);
});
},
close() {
this.isOpen = false;
unlockScroll(this.$refs.content);
},
},
};
</script>