Vue lock scroll

> Vue/Nuxt body-scroll-lock implementation. Lock body scroll at all devices

[![NPM Version][npm-image]][npm-url]

Install

``
npm i -S vue-scroll-lock
`

Usage

`
import ScrollLock from 'vue-lock-scroll'

Vue.use(ScrollLock, options)
`


$3

| Property | Type | Default |
| ------------- |:-------------:| -----:|
| propName | String | $scrollLock |
| gapedElements | String | '' |


propName - recommended to use with $ prefix to prevent duplicate naming in component.

gapedElements - when scroll locks scrollbar
disappears so fixed element position change relative to scrollBar width. To prevent it you can pass gapedElements property with css selectors: '.header, .fixed-div, .absolute-div'.

$3


`
Vue.use(ScrollLock, {
propName: '$locker',
gapedElements: '.header'
})
`
#### Lock scroll:
`
this.$locker.lock(targetElement, options)
`

#### Options
`
this.$locker.lock(targetElement, {
reserveScrollBarGap: true
})
`

targetElement - DOM element that can be scrolled.

reserveScrollBarGap - add padding to elements in gapedElements string to prevent content jumping on lock/unlock scroll.

* targetElement required in IOS devices*

#### Unlock scroll with element:
`
this.$locker.unlock(targetElement)
`
#### Unlock all scroll locks:
`
this.$locker.unlockAll()
`

$3

In .js file:
`
/ import class /
import ScrollLock from 'vue-lock-scroll'

/ create new ScrollLock instance /
const locker = new ScrollLock(gapedElements)

/ example /
const locker = new ScrollLock('.header, .fixed-element')

/ lock scroll /
locker.lock(target, {
reserveScrollBarGap: true
})
``

License

MIT

[npm-image]: https://img.shields.io/npm/v/vue-lock-scroll.svg
[npm-url]: https://www.npmjs.com/package/vue-lock-scroll