{"_id":"@alexspirgel/no-scroll","_rev":"3-65f4b380cdf39952ea2e00a6f36b1668","name":"@alexspirgel/no-scroll","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@alexspirgel/no-scroll","version":"1.0.0","keywords":["no","scroll","prevent"],"author":{"name":"Alexander Spirgel"},"license":"MIT","_id":"@alexspirgel/no-scroll@1.0.0","maintainers":[{"name":"alexspirgel","email":"spirgel.alexander@gmail.com"}],"homepage":"https://github.com/alexspirgel/no-scroll#readme","bugs":{"url":"https://github.com/alexspirgel/no-scroll/issues"},"dist":{"shasum":"3371e5bbb5f7a50ee43e061a3cb8e09262a4e9e1","tarball":"https://registry.npmjs.org/@alexspirgel/no-scroll/-/no-scroll-1.0.0.tgz","fileCount":12,"integrity":"sha512-vc3tLp3Jg8rOkgXZwi4Zk1HtcvgCo8x7XJgH5uiDui4jAOWjVqIoq8JIKUbM0Mz4+JiG3+kmDeA7h+4tQllR0w==","signatures":[{"sig":"MEUCIAF/cEXkuHUpe8oHHLM3zCoKJgXz8UxxbrD3FpAiQhVCAiEAixna6wTPvOfJG0GPoyA0rmA908Lh6acU96SenPAPGGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63222},"main":"src/scripts/index.js","gitHead":"471c5213dac47f0329d4f5e939c194f54c26bee4","scripts":{"start":"concurrently \"webpack\" \"gulp\""},"_npmUser":{"name":"alexspirgel","email":"spirgel.alexander@gmail.com"},"repository":{"url":"git+https://github.com/alexspirgel/no-scroll.git","type":"git"},"_npmVersion":"6.14.7","description":"A JavaScript function for disabling and reenabling scroll.","directories":{},"_nodeVersion":"14.7.0","dependencies":{"@alexspirgel/extend":"^4.0.0","@alexspirgel/is-element":"^1.0.4","@alexspirgel/is-plain-object":"^1.0.6"},"_hasShrinkwrap":false,"devDependencies":{"gulp":"^4.0.2","sass":"^1.63.6","webpack":"^5.84.1","gulp-sass":"^5.1.0","gulp-header":"^2.0.9","gulp-notify":"^4.0.0","gulp-rename":"^2.0.0","webpack-cli":"^5.1.1","concurrently":"^8.2.0","gulp-sourcemaps":"^3.0.0","webpack-notifier":"^1.15.0","terser-webpack-plugin":"^5.3.9"},"_npmOperationalInternal":{"tmp":"tmp/no-scroll_1.0.0_1689099086108_0.560765423775395","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@alexspirgel/no-scroll","version":"1.0.1","keywords":["no","scroll","prevent"],"author":{"name":"Alexander Spirgel"},"license":"MIT","_id":"@alexspirgel/no-scroll@1.0.1","maintainers":[{"name":"alexspirgel","email":"spirgel.alexander@gmail.com"}],"homepage":"https://github.com/alexspirgel/no-scroll#readme","bugs":{"url":"https://github.com/alexspirgel/no-scroll/issues"},"dist":{"shasum":"929e1772ad2924266382528cd9a524b774ca3132","tarball":"https://registry.npmjs.org/@alexspirgel/no-scroll/-/no-scroll-1.0.1.tgz","fileCount":12,"integrity":"sha512-g1L794lW0djAbmKUSI9re+/kWvV85Of9JVaY8EkZNnjZQdxCJKSkBAcc6Fvd6V4PEMm3j35MHeGRBWelrjX5og==","signatures":[{"sig":"MEYCIQCV5jxVmp4Mxt47HpNl3ccfwGWRsH5fazHILF/OY8ZOvgIhAJAsVLp5NrXYvdaEctPdFftSH0HNJQyfN59NRI3m4SGt","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":63576},"main":"src/scripts/index.js","gitHead":"dfd4db9300209d533576303989a62c267e755626","scripts":{"start":"concurrently \"webpack\" \"gulp\""},"_npmUser":{"name":"alexspirgel","email":"spirgel.alexander@gmail.com"},"repository":{"url":"git+https://github.com/alexspirgel/no-scroll.git","type":"git"},"_npmVersion":"6.14.18","description":"A JavaScript function for disabling and reenabling scroll.","directories":{},"_nodeVersion":"14.21.3","dependencies":{"@alexspirgel/extend":"^4.0.0","@alexspirgel/is-element":"^1.0.4","@alexspirgel/is-plain-object":"^1.0.6"},"_hasShrinkwrap":false,"devDependencies":{"gulp":"^4.0.2","sass":"^1.63.6","webpack":"^5.84.1","gulp-sass":"^5.1.0","gulp-header":"^2.0.9","gulp-notify":"^4.0.0","gulp-rename":"^2.0.0","webpack-cli":"^5.1.1","concurrently":"^8.2.0","gulp-sourcemaps":"^3.0.0","webpack-notifier":"^1.15.0","terser-webpack-plugin":"^5.3.9"},"_npmOperationalInternal":{"tmp":"tmp/no-scroll_1.0.1_1777068149061_0.0586488136075789","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@alexspirgel/no-scroll","version":"1.0.2","author":{"name":"Alexander Spirgel"},"description":"A JavaScript function for disabling and reenabling scroll.","keywords":["no","scroll","prevent"],"main":"src/scripts/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/alexspirgel/no-scroll.git"},"homepage":"https://github.com/alexspirgel/no-scroll#readme","bugs":{"url":"https://github.com/alexspirgel/no-scroll/issues"},"scripts":{"start":"concurrently \"webpack\" \"gulp\""},"devDependencies":{"concurrently":"^8.2.0","gulp":"^4.0.2","gulp-header":"^2.0.9","gulp-notify":"^4.0.0","gulp-rename":"^2.0.0","gulp-sass":"^5.1.0","gulp-sourcemaps":"^3.0.0","sass":"^1.63.6","terser-webpack-plugin":"^5.3.9","webpack":"^5.84.1","webpack-cli":"^5.1.1","webpack-notifier":"^1.15.0"},"dependencies":{"@alexspirgel/extend":"^4.0.0","@alexspirgel/is-element":"^1.0.4","@alexspirgel/is-plain-object":"^1.0.6"},"gitHead":"780d2723a5d559c898f373baf1bde6883146a959","_id":"@alexspirgel/no-scroll@1.0.2","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-9XnZZk3spf9QRqpZTH+ijFSN+FIMdZvOM2qMRu0Wl6XSlCJaQuOjZxmiJNd/a3V/FiZQRD8idS2ecgh5QAbYFQ==","shasum":"e8183bf3e04f37a6053d3df5d50a129c4fd9b21c","tarball":"https://registry.npmjs.org/@alexspirgel/no-scroll/-/no-scroll-1.0.2.tgz","fileCount":12,"unpackedSize":63894,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDdlodZk3ONeSzofrH3dVyQz+kFLq1vRBwvftmDpF1pOwIgGt7eXhbTUqbR1qwDEmdtdsrNL+B/Qbb+ruFj/qLo+LY="}]},"_npmUser":{"name":"alexspirgel","email":"spirgel.alexander@gmail.com"},"directories":{},"maintainers":[{"name":"alexspirgel","email":"spirgel.alexander@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/no-scroll_1.0.2_1777137603357_0.11483137067188687"},"_hasShrinkwrap":false}},"time":{"created":"2023-07-11T18:11:25.970Z","modified":"2026-04-25T17:20:03.631Z","1.0.0":"2023-07-11T18:11:26.257Z","1.0.1":"2026-04-24T22:02:29.227Z","1.0.2":"2026-04-25T17:20:03.521Z"},"bugs":{"url":"https://github.com/alexspirgel/no-scroll/issues"},"author":{"name":"Alexander Spirgel"},"license":"MIT","homepage":"https://github.com/alexspirgel/no-scroll#readme","keywords":["no","scroll","prevent"],"repository":{"type":"git","url":"git+https://github.com/alexspirgel/no-scroll.git"},"description":"A JavaScript function for disabling and reenabling scroll.","maintainers":[{"name":"alexspirgel","email":"spirgel.alexander@gmail.com"}],"readme":"# No Scroll\r\n\r\nNo Scroll is a JavaScript utility for disabling and re-enabling scroll without causing layout shift. It works by displaying a pseudo element to occupy the space created on some devices when removing the scrollbar. The script will first detect the amount of space the scrollbar takes up so it will also work on devices with overlay scrollbars that don't take up space.\r\n\r\n<a href=\"http://alexanderspirgel.com/no-scroll/demo\" target=\"_blank\">View Demo →</a>\r\n\r\n## Installation\r\n\r\n### Option 1: Install using NPM\r\n\r\nInstall the script using NPM:\r\n\r\n```\r\nnpm install @alexspirgel/no-scroll\r\n```\r\n\r\nRequire the script:\r\n\r\n```js\r\nconst noScroll = require('@alexspirgel/no-scroll');\r\n```\r\n\r\nImport the styles:\r\n\r\n```scss\r\n@import 'node_modules/@alexspirgel/no-scroll/src/styles/partials/_mixin.scss';\r\n@include no-scroll();\r\n```\r\nIf you are not compiling scss, you can use the pre-built dist styles instead.\r\n\r\n### Option 2: Install using script/style tags\r\n\r\nDownload the normal or minified script and styles from the 'dist' folder.\r\n\r\nAdd a script and style tag with a path to the downloaded script and styles.\r\n\r\n```html\r\n<link rel=\"stylesheet\" href=\"path/to/no-scroll.min.css\">\r\n<script src=\"path/to/no-scroll.min.js\"></script>\r\n```\r\n\r\n## Usage\r\n\r\n```html\r\n<div class=\"vertical-wrapper-outer\" data-no-scroll-element=\"outer\">\r\n\t<div class=\"vertical-wrapper-inner\" data-no-scroll-element=\"inner\">\r\n\t\tcontent here...\r\n\t</div>\r\n</div>\r\n```\r\n\r\n```js\r\nnoScroll.toggleScroll({\r\n\touterElement: '.vertical-wrapper-outer',\r\n\tinnerElement: '.vertical-wrapper-inner',\r\n\taxis: 'y'\r\n});\r\n```\r\nSee the <a href=\"http://alexanderspirgel.com/no-scroll/demo\" target=\"_blank\">demo</a> for more examples.\r\n\r\n## Options\r\n\r\n### `outerElement` (required)\r\n\r\nThe outer element.\r\n\r\nType: `string | element reference`\r\n\r\n### `innerElement` (required)\r\n\r\nThe inner element.\r\n\r\nType: `string | element reference`\r\n\r\n### `axis`\r\n\r\nThe axis (or axes) to disable/enable scroll.\r\n\r\nType: `string | object`\r\n\r\nDefault: `'y'`\r\n\r\n### `dataAttributeName`\r\n\r\nAn object of options for customizing data attribute names used by the script. These options will probably not be needed in most cases, but they exist just in case. Keep in mind that changing data attribute names from the default values will require matching updates to the CSS. See <a href=\"#customizing-css\">Customizing CSS</a> for an explanation of how that should be done.\r\n\r\nType: `object`\r\n\r\n### `dataAttributeName.element`\r\n\r\nThe element data attribute name.\r\n\r\nType: `string`\r\n\r\nDefault: `'data-no-scroll-element'`\r\n\r\n### `dataAttributeName.xState`\r\n\r\nThe \"x\" axis scroll state data attribute name.\r\n\r\nType: `string`\r\n\r\nDefault: `'data-no-scroll-x-state'`\r\n\r\n### `dataAttributeName.yState`\r\n\r\nThe \"y\" axis scroll state data attribute name.\r\n\r\nType: `string`\r\n\r\nDefault: `'data-no-scroll-y-state'`\r\n\r\n### `cssVariableName`\r\n\r\nAn object of options for customizing CSS variable names used by the script. These options will probably not be needed in most cases, but they exist just in case. Keep in mind that changing CSS variable names from the default values will require matching updates to the CSS. See <a href=\"#customizing-css\">Customizing CSS</a> for an explanation of how that should be done.\r\n\r\n### `cssVariableName.xScrollbarHeight`\r\n\r\nThe \"x\" axis scrollbar height variable name.\r\n\r\nType: `string`\r\n\r\nDefault: `'--no-scroll--x-scrollbar-height'`\r\n\r\n### `cssVariableName.yScrollbarWidth`\r\n\r\nThe \"y\" axis scrollbar width variable name.\r\n\r\nType: `string`\r\n\r\nDefault: `'--no-scroll--y-scrollbar-width'`\r\n\r\n### `cssVariableName.documentWidthOffset`\r\n\r\nThe document width offset variable name. This variable is created when the `<html>` scroll is disabled/enabled. It can be used to account for the width difference created when the scrollbar is disabled vs. enabled. See an example of how to implement this on the \"Toggle Body Scroll\" button element on the <a href=\"http://alexanderspirgel.com/no-scroll/demo\" target=\"_blank\">demo</a> page. \r\n\r\nType: `string`\r\n\r\nDefault: `'--no-scroll--document-width-offset'`\r\n\r\n## Customizing CSS\r\n\r\nIf the any of the `dataAttributeName` or `cssVariableName` options are changed from their default values, the CSS must be updated to match.\r\n\r\n### Option 1: Utilizing Mixin Options\r\n\r\nThe `no-scroll` mixin options can be used to customize the data attribute names and the css variable names.\r\n\r\nThese are the default values, but they can be changed as needed to match options passed to the JavaScript:\r\n\r\n```scss\r\n@include no-scroll((\r\n\tdata-attribute-name: (\r\n\t\telement: 'data-no-scroll-element',\r\n\t\tx-state: 'data-no-scroll-x-state',\r\n\t\ty-state: 'data-no-scroll-y-state',\r\n\t),\r\n\tcss-variable-name: (\r\n\t\tx-scrollbar-height: '--no-scroll--x-scrollbar-height',\r\n\t\ty-scrollbar-width: '--no-scroll--y-scrollbar-width',\r\n\t\tdocument-width-offset: '--no-scroll--document-width-offset',\r\n\t)\r\n));\r\n```\r\n\r\n### Option 2: Find & Replace Compiled Styles\r\n\r\nAlternatively, a simple find/replace of necessary values in the compiled stylesheet will work just as well.","readmeFilename":"README.md"}