Gathering detailed insights and metrics for v-scroll-lock
Gathering detailed insights and metrics for v-scroll-lock
A Vue.js directive for body scroll locking without breaking scrolling of a target element.
Installations
npm install v-scroll-lockDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
10.22.0
NPM Version
6.14.6
Releases
5
Languages
4
TypeScript
Vue
JavaScript
HTML
TypeScript (82.24%)
Vue (10.77%)
JavaScript (5.64%)
HTML (1.34%)
Developer
phegman
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
Apache-2.0 License
184 Stars
23 Commits
12 Forks
3 Watchers
27 Branches
2 Contributors
Updated on Apr 01, 2025
Maintainers
1
Package Meta Information
Latest Version
1.3.1
Package Id
v-scroll-lock@1.3.1
Unpacked Size
221.14 kB
Size
72.90 kB
File Count
36
NPM Version
6.14.6
Node Version
10.22.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
39
@babel/core@babel/preset-env@rollup/plugin-replace@types/body-scroll-lock@types/node@typescript-eslint/parser@vue/eslint-config-prettier@vue/eslint-config-typescriptcss-loadereslinteslint-plugin-prettiereslint-plugin-vuefile-loaderfocus-traphtml-webpack-pluginhuskynode-sassprettierpretty-quickrimrafrolluprollup-plugin-aliasrollup-plugin-babelrollup-plugin-commonjsrollup-plugin-node-resolverollup-plugin-terserrollup-plugin-typescript2sass-loaderts-loadertypescriptvuevue-class-componentvue-loadervue-property-decoratorvue-style-loadervue-template-compilerwebpackwebpack-cliwebpack-dev-server
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
Table of Contents
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 into an easy to use Vue.js directive.
Demo
Demo can be viewed here: http://v-scroll-lock.peterhegman.com/
Source code for demo can be viewed in src/Demo.vue
Installation
Module Bundler (Webpack, Rollup, etc)
Yarn
1yarn add v-scroll-lock
NPM
1npm install v-scroll-lock --save
Install the Directive
1import VScrollLock from 'v-scroll-lock' 2 3Vue.use(VScrollLock)
Vue CDN
Download latest v-scroll-lock.min.js from https://github.com/phegman/v-scroll-lock/releases
Include using a <script> tag
1<script src="v-scroll-lock.min.js"></script>
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.
1<template> 2 <div class="modal" v-if="open"> 3 <button @click="closeModal">X</button> 4 <div class="modal-content" v-scroll-lock="open"> 5 <p>A bunch of scrollable modal content</p> 6 </div> 7 </div> 8</template> 9 10<script> 11export default { 12 name: 'Modal', 13 data() { 14 return { 15 open: false, 16 } 17 }, 18 methods: { 19 openModal() { 20 this.open = true 21 }, 22 closeModal() { 23 this.open = false 24 }, 25 }, 26} 27</script>
body-scroll-lock options
Options can be passed when installing the directive:
1import VScrollLock from 'v-scroll-lock' 2 3Vue.use(VScrollLock, { 4 bodyScrollOptions: { 5 reserveScrollBarGap: true, 6 }, 7})
See https://github.com/willmcpo/body-scroll-lock#options for full list of options.
Providing Your Own Version of body-scroll-lock
To make using this directive easier 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:
1import VScrollLock from 'v-scroll-lock/dist/v-scroll-lock-no-dep.esm' 2import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock' 3 4Vue.use(VScrollLock, { 5 enableBodyScroll, 6 disableBodyScroll, 7})
Support
Please open an issue for support.
Contributing
Please contribute using Github Flow. Create a branch, add commits, and open a pull request.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0
Reason
Found 1/16 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
Project has not signed or included provenance with any releases.
Details
- Warn: release artifact v1.3.1 not signed: https://api.github.com/repos/phegman/v-scroll-lock/releases/31267428
- Warn: release artifact v1.3.0 not signed: https://api.github.com/repos/phegman/v-scroll-lock/releases/31266708
- Warn: release artifact v1.2.0 not signed: https://api.github.com/repos/phegman/v-scroll-lock/releases/26611847
- Warn: release artifact v1.1.1 not signed: https://api.github.com/repos/phegman/v-scroll-lock/releases/25630200
- Warn: release artifact v1.1.0 not signed: https://api.github.com/repos/phegman/v-scroll-lock/releases/21244208
- Warn: release artifact v1.3.1 does not have provenance: https://api.github.com/repos/phegman/v-scroll-lock/releases/31267428
- Warn: release artifact v1.3.0 does not have provenance: https://api.github.com/repos/phegman/v-scroll-lock/releases/31266708
- Warn: release artifact v1.2.0 does not have provenance: https://api.github.com/repos/phegman/v-scroll-lock/releases/26611847
- Warn: release artifact v1.1.1 does not have provenance: https://api.github.com/repos/phegman/v-scroll-lock/releases/25630200
- Warn: release artifact v1.1.0 does not have provenance: https://api.github.com/repos/phegman/v-scroll-lock/releases/21244208
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 10 are checked with a SAST tool
Reason
110 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-9v62-24cr-58cx
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.5
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More