A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus). Built on top of https://github.com/willmcpo/body-scroll-lock
Preventing the body from scrolling when you have a modal/lightbox/flyout/nav-menu open on all devices can be a huge pain. This package wraps https://github.com/willmcpo/body-scroll-lock into an easy to use Vue.js directive.
Demo can be viewed here: http://v-scroll-lock.peterhegman.com/
Source code for demo can be viewed in src/Demo.vue
yarn add v-scroll-lock
npm install v-scroll-lock --save
import VScrollLock from 'v-scroll-lock'
Vue.use(VScrollLock)
Download latest v-scroll-lock.min.js
from https://github.com/phegman/v-scroll-lock/releases
Include using a <script>
tag
<script src="v-scroll-lock.min.js"></script>
Once the plugin is installed the v-scroll-lock
directive can be used in any of your components. When the value of the directive is true
scrolling will be locked on all elements except the element the directive is bound to.
Here is an example of how you may implement it in a basic modal. Please note the below example is to demonstrate usage of the v-scroll-lock
directive and is not a complete implementation of a modal. See src/components/Modal.vue
for a more in depth example.
<template>
<div class="modal" v-if="open">
<button @click="closeModal">X</button>
<div class="modal-content" v-scroll-lock="open">
<p>A bunch of scrollable modal content</p>
</div>
</div>
</template>
<script>
export default {
name: 'Modal',
data() {
return {
open: false,
}
},
methods: {
openModal() {
this.open = true
},
closeModal() {
this.open = false
},
},
}
</script>
Options can be passed when installing the directive:
import VScrollLock from 'v-scroll-lock'
Vue.use(VScrollLock, {
bodyScrollOptions: {
reserveScrollBarGap: true,
},
})
See https://github.com/willmcpo/body-scroll-lock#options for full list of options.
To make using this directive easier body-scroll-lock is included in the package. In the case that you would like to use a version different than the packaged version this can be specified in the plugin options. Also note that v-scroll-lock-no-dep.esm.js
should be imported to prevent duplicate code in your bundle. See example below:
import VScrollLock from 'v-scroll-lock/dist/v-scroll-lock-no-dep.esm'
import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock'
Vue.use(VScrollLock, {
enableBodyScroll,
disableBodyScroll,
})
Please open an issue for support.
Please contribute using Github Flow. Create a branch, add commits, and open a pull request.
Author: phegman
Demo: https://v-scroll-lock.peterhegman.com/
Source Code: https://github.com/phegman/v-scroll-lock#demo
#vuejs #vue #javascript