A Vue.js directive for body scroll locking without breaking scrolling of a target element

v-scroll-lock

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 the awesome library https://github.com/willmcpo/body-scroll-lock into an easy to use Vue.js directive.

Installation

Yarn

yarn add v-scroll-lock

NPM

npm install v-scroll-lock --save

Install the Vue plugin

In your main JS file first import this plugin

import VScrollLock from 'v-scroll-lock'

Install the plugin

Vue.use(VScrollLock)

Usage

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. 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>

GitHub