v-body-scroll-lock
v1.1.3
Published
Vue directive for an easy use of the body-scroll-lock library.
Downloads
1,586
Maintainers
Readme
v-body-scroll-lock
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
Installation
Yarn
yarn add v-body-scroll-lock
Npm
npm i v-body-scroll-lock --save
How to use
Add v-body-scroll-lock
or v-bsl
(short version) to the element which you want to keep scrollable.
v-body-scroll-lock
and v-bsl
take a boolean
as an argument like v-body-scroll-lock="modalIsOpen"
If modalIsOpen
is true, body scroll lock will be applied to other elements except for the one which has v-body-scroll-lock="modalIsOpen"
Code
For a more deep example checkout App.vue
in /src/App.vue
.
<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 modal</button>
</div>
</template>
<script>
export default {
name: 'modal',
data() {
return {
modalIsOpen: false,
}
},
methods: {
closeModal() {
this.modalIsOpen = false;
},
openModal() {
this.modalIsOpen = true;
}
}
}
</script>
Options
reserveScrollBarGap
Reserves the with of the scrollbar and prevents the unpleasant flickering effect that can occur when locking the body scroll. More info here.
To enable the reserveScrollBarGap
option add :reserveScrollBarGap
after v-body-scroll-lock
or v-bsl
.
Example: v-body-scroll-lock:reserveScrollBarGap="modalIsOpen"
.
Issues
Issues can be created on the issues page.
Contributing
To contribute, please make a pull request.