Vue lock scroll

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

Install

npm i -S vue-scroll-lock

Usage

import ScrollLock from 'vue-lock-scroll'

Vue.use(ScrollLock, options)

Options

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

Example

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()

Usage outside .vue files

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