{"bugs":{"url":"https://github.com/willmcpo/body-scroll-lock/issues"},"dist":{"shasum":"ee9966e196a133b8c8d8fe5ba9362245f11fd1dc","tarball":"https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-2.3.3-beta.4.tgz","fileCount":12,"integrity":"sha512-xHU14ZTygQWnpeD3cC3dx0tjy3HoxN2ca9pHck43lZG4GJsXm+mTw/8K6JWWwkdEkOkW6gdeCkztfheOVk3GBQ==","signatures":[{"sig":"MEYCIQClEshRTZ+uVtHyGUqsJ6+ssP62rRIDWMlEvcCwIkaiGQIhAP3Z1vwcuZpLn7SIxTC8fq1KmEtxj2+QrrtX2Nd4KdB9","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\nwsFcBAEBCAAQBQJa1QtRCRA9TVsSAnZWagAAI1oP/ROQ/KsQqMLi9BMhduf+\n//Rydm9MzjNHjZPc5G0xW/6J9QDe3tBmknvwvl0U+Bu1B8py2eYwwCr+RbKJ\nX/kRDO1PeM58vD/2NIYiBArvA8pDTtVfntpMHQseJq0eF1ElyN5LYP8iw/S7\n1SjRRIPbhBWDqieUHN/Eyfl0T3QMLMbW4eE0fu2swWSCudVgG2lDTqAHo7Hx\n5EWmXepD7l2MmMXv6PPtaz4RbVhoBC5yyv06X66Z6yb86OwTcR3nxJ43IZjp\n37/3nS6+EKnCVEANLdpGM13sTw35RCAPiMjUozNe2rTOr9h89Nf7V0HRn9k5\nJKi/C5yZc+q2iLek9F5WsLKrRcVwjQ3PspC0+aZT3SrfSn5t+i20haFh1Yve\ntMx5/gZ8WsCj0Gn2nGE5ExJ9VBVwTLojWs3+9Wll6ctlNNzLodeWE+90jc4W\nbh+8E1NY5yvHWgEmWM+Y40Z+CQE5wq7dvUsrNcppqDGghweTw5HRpSPsPevG\nRf8pBW/7fR92Fi8ilXuUd+m5Vb2TZLPfon/isuDX3UQdUtZJM5uvJbYrOzOG\n8TKAcQy5hxSV9tBcLAITT+n1cXcrRTPOJ/YDiVrfZPn0Ff2E8XNcawR14ZyP\nekjnvUB9iEJMVh5VBLhFlf1+ryJl/ImBMZYhqIVdRvv6S4fSjHI9RWCPYWjq\nMEtS\r\n=+S1s\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.4_1523911504371_0.07111638570675227","host":"s3://npm-registry-packages"},"_id":"body-scroll-lock@2.3.3-beta.4","version":"2.3.3-beta.4"}