{"bugs":{"url":"https://github.com/willmcpo/body-scroll-lock/issues"},"dist":{"shasum":"2c543e3802b49cd3bd25f9946bbecc71e89b1541","tarball":"https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-2.3.3-beta.1.tgz","fileCount":2059,"integrity":"sha512-49fnKnMXk/hLJW+r2DGmAW8iFkACKastTsrBhdEoL+951rtV7x67HCSSjP9P+ogPlqRW1wggsRt4h+lwUC2VbQ==","signatures":[{"sig":"MEUCIDhDmv4PfGv46a9C8C9HtZDciAdv3BzFXRtL3l5oQWzAAiEAsm92ckMxDTH3B3mKQevQaH3O3BFLIqH9TgbnJEqik+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6776783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1JafCRA9TVsSAnZWagAAOl8P/0Je5gGpl7y5IhGT4V/C\nVyCRMSIg1oiCK6QkMcwALPmUSF3TDBlnDOAWtCX4ck5KakjJOEXVZGAFsTMW\nDN1tBniCHxroGQbjcVaef0rmadDob5w965mGv5DEIxWcsJXTD1iAwk2Z5E2M\nsbe93Cd1c6SePTcWohdT3TecbXS6W+rQBDjsd5SDZb1nyrDMfB+tJh/vLX1y\nDXU4PnPkIjQ6clQdsvQp+eTbV6mIruAKxdmKM4A7pM+iHmakeA7jV2v07S72\nsVnB/HHqp+9v9S1onzekDuFj6RL8o04m5zFWSemIy6ftQFUbUSJlKbcX3Gj7\nKXhE35+SfD1sDuE/zhweFWZjvAuSI0SMgaGUj2ja1J/2whE1/Av9wA719q/w\nNjU5yGQfJba/efpVMoDLSw6zOM3oiJ/Xrbj5o4iS55IjZV8F7uFmXI/E/lGb\nS1Qf2WbHT6k6tbke8CuMN4Uf3B+wP2/e6S2imS8yhW0/CeEKCAxU1brgBFac\nZ2DghtPRpM8g8HFpqUWd5b5zh+2UFzbteJUUVIj5dunIVr82hSMyXOvM+4SL\nY8fvzS66iOoWJZ4YX7YI7mS9EOPP7rfXmP+DJtevNjTWDUWZFgPT6wHhFBnq\noZfREJnDbVY3iZIeIzB/L8ha86JpZbVqn7K6l6vL14yILpYC5ZNGnhKObiEb\nLCK2\r\n=2RnQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/bodyScrollLock.js","name":"body-scroll-lock","author":{"name":"Will Po"},"readme":"

\"Body

\n\n## Why body-scroll-lock ?\nEnables 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).\n\n*Features:*\n\n- disables body scroll WITHOUT disabling scroll of a target element\n- works on iOS mobile/tablet\n- works on Android\n- works on Safari desktop\n- works on Chrome/Firefox \n- works with vanilla JS and frameworks such as React / Angular\n- supports nested target elements (eg. a modal that appears on top of a flyout)\n- `-webkit-overflow-scrolling: touch` still works\n\n*Aren't the alternative approaches sufficient?*\n\n- the approach `document.body.ontouchmove = (e) => { e.preventDefault; return false; };` locks the\nbody scroll, but ALSO locks the scroll of a target element (eg. modal).\n- the approach `overflow: hidden` on the body or html elements doesn't work for all browsers\n- the `position: fixed` approach causes the body scroll to reset\n- some approaches break inertia/momentum/rubber-band scrolling on iOS\n\n## Install\n\n $ yarn add body-scroll-lock\n or\n $ npm install body-scroll-lock\n\n\n\n## Usage examples\n##### Vanilla JS\n```javascript\n// 1. Import the functions\nconst bodyScrollLock = require('body-scroll-lock');\nconst disableBodyScroll = bodyScrollLock.disableBodyScroll;\nconst enableBodyScroll = bodyScrollLock.enableBodyScroll;\n \n// 2. Get a target element (such as a modal/lightbox/flyout/nav). \nconst targetElement = document.querySelector(\"#someElementId\");\n \n \n// 3. ...in some event handler after showing the target element...disable body scroll\ndisableBodyScroll(targetElement);\n \n \n// 4. ...in some event handler after hiding the target element...\nenableBodyScroll(targetElement);\n```\n \n \n##### React/ES6\n```javascript\n// 1. Import the functions\nimport { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';\n \nclass SomeComponent extends React.Component {\n targetElement = null;\n \n componentDidMount() {\n // 2. Get a target element \n this.targetElement = document.querySelector('#targetElementId');\n }\n \n showTargetElement = () => {\n // ... some logic to show target element\n \n // 3. Disable body scroll\n disableBodyScroll(this.targetElement);\n };\n \n hideTargetElement = () => {\n // ... some logic to hide target element\n \n // 4. Re-enable body scroll\n enableBodyScroll(this.targetElement);\n }\n \n componentWillUnmount() {\n // 5. Useful if we have called disableBodyScroll for multiple target elements,\n // and we just want a kill-switch to undo all that.\n // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor \n // clicks a link which takes him/her to a different page within the app.\n clearAllBodyScrollLocks();\n }\n\n render() { \n return (\n
\n some JSX to go here\n
\n );\n }\n}\n```\n\n## Demo\nhttp://wp-os.s3-website-ap-southeast-2.amazonaws.com/body-scroll-lock-demo/index.html\n\n## Caveat\nOn iOS mobile (as is visible in the above demo), if you scroll the body directly even when the scrolling is \nlocked (on iOS), the body scrolls - this is not what this package solves. It solves the typical case where a modal \noverlays the screen, and scrolling within the modal never causes the body to scroll too (when the top or bottom \nwithin the modal has been reached). \n\n## Functions\n\n| Function | Argument | Return | Description | \n| :--- | :--- | :---: | :--- |\n| `disableBodyScroll` | `targetElement: HTMLElement` | `void` | Disables body scroll while enabling scroll on target element |\n| `enableBodyScroll` | `targetElement: HTMLElement` | `void` | Enables body scroll and removing listeners on target element |\n| `clearAllBodyScrollLocks` | `null` | `void` | Clears all scroll locks |\n \n \n## References\nhttps://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177\nhttps://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi\n","gitHead":"024e3e575e9e014cbf46ba1bb25e9f2f29cd07e7","license":"MIT","scripts":{"flow":"flow","lint":"eslint ./src","build":"babel src/ -d lib/","clean":"rimraf lib/","release":"npm version","precommit":"lint-staged","prerelease":"yarn flow && yarn lint && yarn run clean && yarn build","postrelease":"yarn publish && git push --follow-tags","prettierAll":"prettier --write --single-quote --trailing-comma es5 --print-width 120 'src/**/*.js'"},"_npmUser":{"name":"willmcpo","email":"wilson.po@gmail.com"},"homepage":"https://github.com/willmcpo/body-scroll-lock#readme","keywords":["body scroll","body scroll lock","react scroll lock","react scroll","scroll","lock","freeze","toggle","disable","overflow","modal","lightbox","react","vanilla-js","angular","ios","mobile","desktop","tablet"],"repository":{"url":"git+https://github.com/willmcpo/body-scroll-lock.git","type":"git"},"_npmVersion":"5.6.0","description":"Enables 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)","directories":{},"lint-staged":{"*.js":["prettier --write --single-quote --trailing-comma es5 --print-width 120","git add"]},"maintainers":[{"name":"willmcpo","email":"wilson.po@gmail.com"}],"_nodeVersion":"9.11.1","dependencies":{"ua-parser-js":"^0.7.17"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.1.2","husky":"^0.14.3","eslint":"^4.15.0","rimraf":"^2.6.2","flow-bin":"^0.63.1","prettier":"^1.10.2","babel-cli":"^6.26.0","lint-staged":"^6.0.1","babel-eslint":"^8.2.1","babel-preset-env":"^1.6.1","babel-preset-flow":"^6.23.0","eslint-config-babel":"^7.0.2","babel-preset-stage-0":"^6.24.1","eslint-plugin-import":"^2.8.0","eslint-plugin-flowtype":"^2.41.0","eslint-config-airbnb-base":"^12.1.0","babel-plugin-transform-flow-strip-types":"^6.22.0"},"_npmOperationalInternal":{"tmp":"tmp/body-scroll-lock_2.3.3-beta.1_1523881630372_0.6260672001157357","host":"s3://npm-registry-packages"},"_id":"body-scroll-lock@2.3.3-beta.1","version":"2.3.3-beta.1"}