1.0.14 • Published 6 years ago

vue-lock-scroll v1.0.14

Weekly downloads
18
License
MIT
Repository
github
Last release
6 years ago

Vue lock scroll

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

NPM Version

Install

npm i -S vue-scroll-lock

Usage

import ScrollLock from 'vue-lock-scroll'

Vue.use(ScrollLock, options)

Options

PropertyTypeDefault
propNameString$scrollLock
gapedElementsString''

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

1.0.14

6 years ago

1.0.13

6 years ago

1.0.12

6 years ago

1.0.11

6 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago