Vue.js Directive To Lock Body Scroll Without Breaking Scroll

disable-background-scrolling-when-popup-modal-is-open

v-scroll-lock is a Vue.js directive to lock body scrolling (for iOS mobile and tablet, Android and Safari/Chrome/Firefox for desktop) without breaking the scrolling of the target element.

how to disable background scrolling when popup modal is open, modal popup scroll with page, modal dialog scrollable not working, disable scrolling when modal is open javascript

How to make use of it:

Install and download:

# Yarn
$ yarn add v-scroll-lock

# NPM
$ npm install v-scroll-lock --save

1. Install and import the v-scroll-lock module.

import VScrollLock from 'v-scroll-lock'
Vue.use(VScrollLock)

2. Use direction in your app.

<template>
  <div class="modal" v-if="open">
    <button @click="closeModal">X</button>
    <div class="modal-content" v-scroll-lock="open">
      <p>Modal Content Here</p>
    </div>
  </div>
</template>
export default {
  name: 'Modal',
  data() {
    return {
      open: false,
    }
  },
  methods: {
    openModal() {
      this.open = true
    },
    closeModal() {
      this.open = false
    },
  },
}

Prevent Body Scroll, v-scroll-lock Plugin/Github, css prevent scrolling behind overlay, css prevent scrolling on div


See Demo And Download

Official Website(phegman): Click Here

This superior jQuery/javascript plugin is developed by phegman. For extra Advanced Usages, please go to the official website.