A Vue directive to lock the body from scrolling without stopping the target element from scrolling.
Uses the body-scroll-lock library (https://github.com/willmcpo/body-scroll-lock).
Works on mobile and tablet (iOS, Android) and desktop (Chrome, Firefox, Safari).
Table of Contents
yarn add v-body-scroll-lock
npm i v-body-scroll-lock --save
Install the Vue plugin
In your main JS file first import this plugin
import VBodyScrollLock from 'v-body-scroll-lock'
Install the plugin
How to use
v-bsl (short version) to the element which you want to keep scrollable.
v-bsl take a
boolean as an argument like
modalIsOpen is true, body scroll lock will be applied to other elements except for the one which has
For a more deep example checkout
This is a modal! I am scrollable while the body is not!
<template> <div v-body-scroll-lock="modalIsOpen" v-show="modalIsOpen" class="modal" > <p>This is a modal! I am scrollable while the body is not!p> <button @click="closeModal">Close modalbutton> div> template>