{"bugs":{"url":"https://github.com/willmcpo/body-scroll-lock/issues"},"dist":{"shasum":"2dcb7139f9f01a56a1f50a80e7d43fb2af0a2d36","tarball":"https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-2.3.3-beta.3.tgz","fileCount":12,"integrity":"sha512-22dB9B1KNy3VwMTAxvVY/BQAdbZGvXf26N/7ybnF1hcLbBbDBPrVBTo9xG0f7Rp2Gcb48Xv29oUFJWuoVgVCuQ==","signatures":[{"sig":"MEUCIQCvI/K0a4VLfHyZGdbkPLQ0WmVfPKBf5QD7nxB5MROgCwIgH753Qe235WsrHYAX7Nk5JmrkDWUuG4fGkfmp+Lt9cEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":203422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1JtzCRA9TVsSAnZWagAAA/4P/2P1VFWRIBFJ61MZIRnW\nWfVUj4bNthC1nJgSpQr3Mu/4Bsb9Rw/KYSwueEP9iVO5ktkriMxOLJRri2rk\nZfllBvXDuThc+NeEnjOiomoyx1SPJnYN/huy7EwOkOLBK+XasaKWme+0qcUR\ngqkhWLByR4k7tm1H/JLcKUUo92Kj6oT3Q3VQuaMhSQ+pL5pEFSTOEvnSharW\nrroyO9QgKoW3LmFPKJ3C5oN8cRp2w8nCofeJAwlMDl2ICGL8RntVgSt9PNnr\ng4KiFbC23V6peeV8izf08k2LUVAXJjyA06c8uXXdWCwF7jpV9orv21JxinKX\nIuhoYrUV08mJcKkjoEhXhbyHPq9ajGeAwr+og31m2eheNUDnCLfmPZY+XWRx\nhkO2i1s5lgoEQ6a4Y1+3QBjTsGKu/VGcAAIZ4HgySPf+JnvSTaGf7vSw+PhF\ndmKZrKXRYLrpeJGvizAs0LO7kkgHjiWhdHno5pNAP6MF2ziu3MSGGZdwHUf8\nqG8c0nEWtJ8z+pc2HJ9JN4yQlUzACWSglHZPHCtHUxjisb1s2xmvnm3WNS+G\nHapPTCHjS1qTintMNbb+oHYaj5TnWkaGT9CeTskQ58dJ3BZXLhBKacm7ARV6\nzNKWHvtshNnhbobbNTtcUfhRLocprSQLh9iR9jwYEcvY7iwPw5Ysf0VSX9yt\nGRGe\r\n=+eTy\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":"6a733cc75fbca0a12f7970210d1d65b6df3eb032","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","_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.3_1523882867065_0.6621812558284101","host":"s3://npm-registry-packages"},"_id":"body-scroll-lock@2.3.3-beta.3","version":"2.3.3-beta.3"}