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
- How to use
- Options
- Issues
- Contributing

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

`

`js

`



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.