Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/phegman/v-scroll-lock
A Vue.js directive for body scroll locking without breaking scrolling of a target element.
https://github.com/phegman/v-scroll-lock
Last synced: 12 days ago
JSON representation
A Vue.js directive for body scroll locking without breaking scrolling of a target element.
- Host: GitHub
- URL: https://github.com/phegman/v-scroll-lock
- Owner: phegman
- License: apache-2.0
- Created: 2018-08-03T04:03:59.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T12:13:38.000Z (almost 2 years ago)
- Last Synced: 2024-10-25T01:27:48.886Z (20 days ago)
- Language: TypeScript
- Size: 1.13 MB
- Stars: 185
- Watchers: 4
- Forks: 13
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/v-scroll-lock)
[](https://travis-ci.org/phegman/v-scroll-lock)
# 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](https://github.com/willmcpo/body-scroll-lock)
## Table of Contents
- [Overview](#overview)
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [Support](#support)
- [Contributing](#contributing)
## Overview
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](https://github.com/willmcpo/body-scroll-lock) into an easy to use Vue.js directive.
## Demo
Demo can be viewed here: [http://v-scroll-lock.peterhegman.com/](https://v-scroll-lock.peterhegman.com/)
Source code for demo can be viewed in `src/Demo.vue`
## Installation
### Module Bundler (Webpack, Rollup, etc)
#### Yarn
```bash
yarn add v-scroll-lock
```
#### NPM
```bash
npm install v-scroll-lock --save
```
#### Install the Directive
```js
import VScrollLock from 'v-scroll-lock'
Vue.use(VScrollLock)
```
### [Vue CDN](https://vuejs.org/v2/guide/#Getting-Started)
Download latest `v-scroll-lock.min.js` from [https://github.com/phegman/v-scroll-lock/releases](https://github.com/phegman/v-scroll-lock/releases)
Include using a `` tag
```html
<script src="v-scroll-lock.min.js">
```
## 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. 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.
```vue
X
export default {
name: 'Modal',
data() {
return {
open: false,
}
},
methods: {
openModal() {
this.open = true
},
closeModal() {
this.open = false
},
},
}
```
### [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock#options) options
Options can be passed when installing the directive:
```js
import VScrollLock from 'v-scroll-lock'
Vue.use(VScrollLock, {
bodyScrollOptions: {
reserveScrollBarGap: true,
},
})
```
See [https://github.com/willmcpo/body-scroll-lock#options](https://github.com/willmcpo/body-scroll-lock#options) for full list of options.
### Providing Your Own Version of [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock)
To make using this directive easier [body-scroll-lock](https://github.com/willmcpo/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:
```js
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,
})
```
## Support
Please [open an issue](https://github.com/phegman/v-scroll-lock/issues/new/) for support.
## Contributing
Please contribute using [Github Flow](https://guides.github.com/introduction/flow/). Create a branch, add commits, and [open a pull request](https://github.com/phegman/v-scroll-lock/compare).