{"bugs":{"url":"https://github.com/stipsan/scroll-into-view-if-needed/issues"},"dist":{"shasum":"205a50622e0e9b97420da5aa08647b51c1855c47","tarball":"https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.1.1.tgz","fileCount":12,"integrity":"sha512-0g5FllBHBk0CbqLNOGzI3F115Nr+Hs1QE3Sqc2B0k78FnF2uL5Ih7YqR2XZQn2loC4fAR7EuR3HuaMHGoATXkg==","signatures":[{"sig":"MEUCICo5tD4S3oNHMJoxE24ZYmXFSY5ivzajH9JZlDRj2CqMAiEA2HrWsKp289lht6cyoLoC1w9ZDw+Hyoxlc2c5ZTBDCgM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa5ibuCRA9TVsSAnZWagAAu18QAI9IjZqUhpnvjPxGpFiT\ncNLwLJ031yJgNk3SuDaQRISDip79BEuL/f3+aP85pn4AGh5RO14u3lckRlMz\nHmOMNgZNid5qwJslEGfE+5gwTNhcuLXx8+IzgBPP8aoQfS8LKxtjF7xw1eI8\neUL+BFO4OyxvuKrtiLfIUC6YPOAWioEPhgWOE9q+u/BtkyV8ZpFcoDqfmJ5Z\nkeHOhG4qyJowR42p5YTXeYzuNwlnQSRq+fnG2vosV82iJ9AfuqOZBLPIr1W/\n2ajWODOFObxVnyyfSJiNIz+GU2feToMNKtTouzydwrzQtX1xcESC9bx1Kk89\nffhAl0CUvklYrhCHiflV2jeHFT8bwSP+7mFHkiQDqzdbLRpl0uj85R1jitK5\nsuw7ipNiF6UNkZwfw7Y8cVShb3kOCDeYtNEDpJcALJ/OkzZTsKgO7wpkhXIA\nil50W5dRI8xgcbt6+h145uFgFR6o9n79daKjVTjot4JR0tKMNPNnmlBPH70w\nt/xPGePDfst3wwuzkynSIH0BSCAzt20ybyrunzt+mGdH5UR1KoMvVP59veWq\nFqf/69pzYGiFmn6avHnCPVuvJe530HeoO3T7bzDxJULseX8YXvoi6VHC7O0M\nBBlxdmkGcy+7gOLU5vk0ZWne+ty5ikzEnyZC4LUbvidPNGix18O+jMNeUPFZ\nfSTN\r\n=zIeP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"scroll-into-view-if-needed","files":["compute.js","es","typings","umd"],"author":{"name":"Stian Didriksen"},"module":"es/index.js","readme":"# This is the work-in-progress, the current stable version is [here](https://github.com/stipsan/scroll-into-view-if-needed/tree/v1)\n\n[![CircleCI Status](https://img.shields.io/circleci/project/github/stipsan/scroll-into-view-if-needed.svg?style=flat-square)](https://circleci.com/gh/stipsan/scroll-into-view-if-needed)\n[![npm stat](https://img.shields.io/npm/dm/scroll-into-view-if-needed.svg?style=flat-square)](https://npm-stat.com/charts.html?package=scroll-into-view-if-needed)\n[![npm version](https://img.shields.io/npm/v/scroll-into-view-if-needed.svg?style=flat-square)](https://www.npmjs.com/package/scroll-into-view-if-needed)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n![scroll-into-view-if-needed](https://user-images.githubusercontent.com/81981/39338772-34165fb2-49c5-11e8-9d29-38acb6842db8.png)\n\nThis used to be just a [ponyfill](https://ponyfill.com) for\n`Element.scrollIntoViewIfNeeded` but is currently being rewritten to cover\n`Element.scrollIntoView(ScrollIntoViewOptions)` including the new `scrollMode: \"if-needed\"` option. This readme will be updated when it's ready for stable\nrelease.\n\n## [Demo](https://scroll-into-view-if-needed.netlify.com)\n\n## Install\n\n```bash\nyarn add scroll-into-view-if-needed@next\n```\n\n## Usage\n\n```js\nimport scrollIntoView from 'scroll-into-view-if-needed'\nconst node = document.getElementById('hero')\n\n// similar behavior as Element.scrollIntoView({block: \"nearest\", inline: \"nearest\"})\n// only that it is a no-op if `node` is already visible\n// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView\n// same behavior as Element.scrollIntoViewIfNeeded()\n// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded\nscrollIntoView(node, {\n  scrollMode: 'if-needed',\n  block: 'nearest',\n  inline: 'nearest',\n})\n\n// same behavior as Element.scrollIntoViewIfNeeded(true) without the \"IfNeeded\" behavior\n// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded\nscrollIntoView(node, { block: 'center', inline: 'center' })\n// scrollMode is \"always\" by default\n\n// smooth scroll if the browser supports it and if the element isn't visible\nscrollIntoView(node, { behavior: 'smooth', scrollMode: 'if-needed' })\n```\n\n### Ponyfill smooth scrolling\n\nIf you're ok with a larger bundlesize and want the smooth scrolling behavior to be ponyfilled you can use the [`smooth-scroll-into-view-if-needed`](https://github.com/stipsan/smooth-scroll-into-view-if-needed) addon.\n\n### Custom scrolling transition\n\nIf the default smooth scrolling ponyfill isn't the duration or easing you want,\nyou can provide your own scrolling logic by giving `behavior` a callback.\n\n```js\nimport scrollIntoView from 'scroll-into-view-if-needed'\nconst node = document.getElementById('hero')\n\nscrollIntoView(node, {\n  // Your scroll actions will always be an array, even if there is nothing to scroll\n  behavior: scrollActions =>\n    // list is sorted from innermost (closest parent to your target) to outermost (often the document.body or viewport)\n    scrollActions.forEach(({ el, top, left }) => {\n      // implement the scroll anyway you want\n      el.scrollTop = top\n      el.scrollLeft = left\n\n      // If you need the relative scroll coordinates, for things like window.scrollBy style logic or whatever, just do the math\n      const offsetTop = el.scrollTop - top\n      const offsetLeft = el.scrollLeft - left\n    }),\n  // all the other options (scrollMode, block, inline) still work, so you don't need to reimplement them (unless you really really want to)\n})\n```\n\n## More documentation will be added (hang in there)\n","gitHead":"5068ad922b173a1ea3f9705ae10faa474f22a633","license":"MIT","release":{"prepare":["@semantic-release/npm"]},"scripts":{"dev":"concurrently 'tsc --watch' 'yarn build:cjs --watch'","lint":"eslint ./integration-examples","build":"yarn build:d.ts && yarn build:cjs && yarn build:es && yarn build:umd && yarn build:umd.min","clean":"rimraf 'umd' 'es' 'typings'","build:es":"BABEL_ENV=es babel src -d es --extensions '.ts'","prebuild":"yarn clean","build:cjs":"BABEL_ENV=cjs babel src -d . --extensions '.ts'","build:umd":"BABEL_ENV=umd NODE_ENV=development rollup -c -f umd -o umd/scroll-into-view-if-needed.js","precommit":"lint-staged","typecheck":"tsc --noEmit","build:d.ts":"tsc --emitDeclarationOnly","build:umd.min":"BABEL_ENV=umd NODE_ENV=production rollup -c -f umd -o umd/scroll-into-view-if-needed.min.js","prepublishOnly":"unset npm_config_cafile && yarn build"},"typings":"typings/index.d.ts","_npmUser":{"name":"stipsan","email":"stipsan@gmail.com"},"homepage":"https://scroll-into-view-if-needed.netlify.com","keywords":["behavior-smooth","if-needed","polyfill","ponyfill","scroll","scroll-into-view","scrollIntoView","scrollIntoViewIfNeeded","scrollMode","smooth","smoothscroll","typescript"],"prettier":{"semi":false,"overrides":[{"files":".babelrc","options":{"parser":"json"}}],"singleQuote":true,"trailingComma":"es5"},"browserify":{"transform":["loose-envify"]},"bundlesize":[{"path":"./umd/scroll-into-view-if-needed.min.js","maxSize":"1.5 kB"},{"path":"./umd/scroll-into-view-if-needed.js","maxSize":"2.3 kB"}],"repository":{"url":"git+https://github.com/stipsan/scroll-into-view-if-needed.git","type":"git"},"_npmVersion":"5.6.0","description":"Ponyfill for upcoming Element.scrollIntoView() APIs like scrollMode: if-needed, behavior: smooth and block: center","directories":{},"lint-staged":{"*.js":["prettier --write","git add"],"*.md":["prettier --write","git add"],"*.css":["prettier --write","git add"],"*.json":["prettier --write","git add"],"*.{ts,tsx}":["prettier --write","git add"],"**/.babelrc":["prettier --write","git add"],"**/package.json":["prettier-package-json --write","git add"]},"maintainers":[{"name":"stipsan","email":"stipsan@gmail.com"}],"sideEffects":false,"_nodeVersion":"8.11.1","publishConfig":{"tag":"next"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"0.14.3","eslint":"4.19.1","rimraf":"2.6.2","rollup":"0.58.2","prettier":"1.12.1","@babel/cli":"7.0.0-beta.46","typescript":"2.8.3","@babel/core":"7.0.0-beta.46","lint-staged":"7.0.5","babel-eslint":"8.2.3","concurrently":"3.5.1","semantic-release":"15.1.7","@babel/preset-env":"7.0.0-beta.46","eslint-plugin-react":"7.7.0","rollup-plugin-babel":"4.0.0-beta.4","eslint-plugin-import":"2.11.0","rollup-plugin-uglify":"3.0.0","prettier-package-json":"1.5.1","rollup-plugin-replace":"2.0.0","eslint-config-prettier":"2.9.0","rollup-plugin-commonjs":"9.1.0","@babel/preset-typescript":"7.0.0-beta.46","rollup-plugin-node-resolve":"3.3.0","babel-plugin-dev-expression":"0.2.1","@babel/plugin-external-helpers":"7.0.0-beta.46","babel-plugin-add-module-exports":"0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/scroll-into-view-if-needed_2.1.1_1525032686329_0.800423098018521","host":"s3://npm-registry-packages"},"_id":"scroll-into-view-if-needed@2.1.1","version":"2.1.1"}