{"bugs":{"url":"https://github.com/willmcpo/body-scroll-lock/issues"},"dist":{"shasum":"d51d38b160de53b0bd7a57e6c90c19173eda3c4b","tarball":"https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-2.4.2-beta.1.tgz","fileCount":12,"integrity":"sha512-W1wQLbZnt8hz74eY7hT6LBaJrym0N/MeG9FPBrkk6uHswEe6xwSrZCHAIRG9l94PIKgcF9SwGd9dQRJrTAdIsA==","signatures":[{"sig":"MEYCIQC03C4UA5JesZc/a3Ly2W5S9HtN9xqFCWW5ZkPeZTvGbgIhAITNphrzLXWI8P9mLmNVDlPDRNJkIln1ilNWpxiFdvh3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":158681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbD4faCRA9TVsSAnZWagAAntAP/iqg3/+nTNPWhsAZcUcf\nQEJsT6/BqtElxNmcvA3P0TS4pOS7V8CZpbimHQJowk5rGSZGaQrR+uEypl1K\nPOu3XKiDgVPRU7IWRDxtF5SI6EPKNEs0Hi0+NXqJY5pZnv7Oz7POAV/TPozq\neXQD899wOAvlgLVxEb/GiExw3C55RCUxr0DL223eXh+sboPQfzbuiHnMq8OH\nRus38D2ArDEppH5FJRd98T5bY00SRQKqAODyEe5XbyWC3L4DzWn08L7rAin4\n+tb8DIt7u5nZiT7OHzE5l23sbh5EqqSfzf9VFCCfXOEcqjNP+yXj8dvagR+e\nFOSIPjR8V7zz3inWfvc7WS4EshbUafn66bb8rzXOrMMdTlZvKpk7tHnyKjdH\n/y0qnQcA1YRPct9Rgmjh+XqsYtXwu0NnKEMhWp+yR/tlyuhkpZx4b3ey4IeH\n8PmPGqNdUQ34L4NZY+BuRHGo/QTjtICR7YipHGdsOfvduXgmtQxrVsrUTxzb\nChaWi1L1kStH/OlWm7Kv58cfCGvKyRY2p1bS+wvqQfzo/C16a4Ls79inK0bf\nU/4Tkljm5eeWu/kwZWykx3bZRnvVK/lIEjsROXAJbzUUC3cKkYGfoFMGLlO1\n6xOFfA6kWNCDOTJGoVf/EWeD7wG7P/9a9nKgYC10aR8ZbuSIRbSdpS/0atkG\nLTmS\r\n=yvkj\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- can reserve scrollbar width\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 that you want to persist scrolling for (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 that you want to persist scrolling for (such as a modal/lightbox/flyout/nav). \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 | Arguments | Return | Description |\n| :--- | :--- | :---: | :--- |\n| `disableBodyScroll` | `targetElement: HTMLElement` | `void` | Disables body scroll while enabling scroll on target element |\n| `enableBodyScroll` | `targetElement: HTMLElement`
`options: BodyScrollOptions` | `void` | Enables body scroll and removing listeners on target element |\n| `clearAllBodyScrollLocks` | `null` | `void` | Clears all scroll locks |\n\n## Options\n### reserveScrollBarGap\n**optional, default:** false\n\nIf the overflow property of the body is set to hidden, the body widens by the width of the scrollbar. This produces an\nunpleasant flickering effect, especially on websites with centered content. If the `reserveScrollBarGap` option is set,\nthis gap is filled by a `padding-right` on the body element. If `disableBodyScroll` is called for the last target element,\nor `clearAllBodyScrollLocks` is called, the `padding-right` is automatically reset to the previous value.\n``` js\nimport { enableBodyScroll } from 'body-scroll-lock';\nimport type { BodyScrollOptions } from 'body-scroll-lock';\n\nconst options: BodyScrollOptions = {\n reserveScrollBarGap: true\n}\n\nenableBodyScroll(targetElement, options);\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":"d09b81f7ebef5d652e4bd50cfd768ce62665251e","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.5.1","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.2.0","dependencies":{},"_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.4.2-beta.1_1527744473849_0.43430428327884885","host":"s3://npm-registry-packages"},"_id":"body-scroll-lock@2.4.2-beta.1","version":"2.4.2-beta.1"}