{"bugs":{"url":"https://github.com/willmcpo/body-scroll-lock/issues"},"dist":{"shasum":"bce5ab21b58eeeb2fc37f85df30dc651615f48ed","tarball":"https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-2.2.0-beta.3.tgz","fileCount":13,"integrity":"sha512-0Oxi1Q8/C80AHN7r3+4XfVhqd/lnHNxWMHJIqcS5CcZE3LCxrxk7TV9SeXPyL/2fgsdJX4IoL5nHOblRrYXV2w==","signatures":[{"sig":"MEUCIQDIKyjjgjLe+dHyjp+AcuZKE/4hhUfQhBLf9W0BYyyJ3QIgTP488knnGbN47V6G2NS2rId4hnYuHz/RGPM2DZ9MWeE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205349},"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":"20823201b5d084071abf7cf12cf93a864691cd9c","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.4.2","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":"8.2.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.2.0-beta.3_1520034789350_0.9738504523441216","host":"s3://npm-registry-packages"},"_id":"body-scroll-lock@2.2.0-beta.3","version":"2.2.0-beta.3"}