{"dist":{"shasum":"013ab3b7b38f0b6d1721ef0187c8042e7b611d6c","tarball":"https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.0.0-alpha.d4e115e7.tgz","fileCount":18,"integrity":"sha512-jOKieJrn0u/T9iD75EUGBegLsEmOs4ONcGyGZrQuy2tYC28QtC4B1j4q5FHNZvKaUw066tVhKKG9NDxReL8g8A==","signatures":[{"sig":"MEYCIQCbRHrm38xSH5pXHyDylTIWpRBahuyvLU1fLzj15+RLdAIhALUyQ8PvZYR0ZiJgJgHg/CW2JDe8bfizieJBHMqk9Fqw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3PU5CRA9TVsSAnZWagAAWT8P/inFk85IzebDHC+bxFeo\n+agswyVPWg7HCJI0cvP49NfnveW29G/8gAbZBv0LbLf6/etP8SObqqxdmQon\nNAp2Qw/AK+4MF7Z++t++mNmXES9CqzUdWjzokQgMyTfZ+qbr1wpsdtfy3c1V\nDdpVjRKhZ2uuqZBb36frUM5703UpNtRWJRRuAqvOwx7lmrLUOUElcaECXzn7\nbPiYWNsXZI0IIiEw7YAzfFe2rFLlTZaBMi10xG7U9iugA9dlmXWPMmcJCOHa\nrvrZbI6+psdvaYtd+cmuR5G360yuafI+8oLdQ3ca9nGOozKAQ1o3zdrYZNHT\nTf9vPRtP+fN5DkKCnsItBCIBTw53q938Xgu4zVX9btwTDwvl6O+54jHiUvcT\nCwWVKK53xVQdikqiWVhkrmwWMfw690gCdo28pysDWMNa9OOBVSPztAfLKiQo\nEqoa6Eh+OpEonTEIANSOthrpB3Hy/PF6EPqFkNUiBHPqgG82eICApByw2r27\nfBid/nuv+ZljsdROh5KR0jMtbfQsnzilttgGM5vTqZYTIAA0N9755d3pCsod\nwHFvIkr2kD3CrE9ywcwUjwEkBP8yI5RX/HVoGwQRYUkVpXU+WgE0XLSGOhda\nK7OGMxcoVIvHJRSaaqeQLzKUn/2beaJHjztdyMPGj2aPwaeURxheOo0EJZkX\n6Guy\r\n=9egL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"scroll-into-view-if-needed","files":["auto.js","compute.js","es","ponyfill.js","umd"],"author":{"name":"Stian Didriksen"},"module":"es/index.js","readme":"[![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) [![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) [![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) [![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/36357426-2f0f3152-14fe-11e8-892a-915d06488171.png)\n\nThis is a [ponyfill](https://ponyfill.com) with the added ability of animating\nthe scroll itself.\n\n## [Demo](https://stipsan.github.io/scroll-into-view-if-needed/)\n\nKudos to [@hsablonniere](https://github.com/hsablonniere) for sharing the\n[original polyfill](https://gist.github.com/hsablonniere/2581101) and\n[@jocki84](https://github.com/jocki84) for\n[improving](https://gist.github.com/jocki84/6ffafd003387179a988e) it!\n\n## Install\n\n```bash\nyarn add scroll-into-view-if-needed\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, you can use the ponyfill version so all your users experience smooth scrolling.\n\n```js\nimport scrollIntoView from 'scroll-into-view-if-needed/ponyfill'\nconst node = document.getElementById('hero')\n\n// If all you want is for all your users to have stuff smooth scroll into view\nscrollIntoView(node, { behavior: 'smooth' })\n\n// combine it with any of the other options\nscrollIntoView(node, {\n  behavior: 'smooth',\n  scrollMode: 'if-needed',\n  block: 'nearest',\n  inline: 'nearest',\n})\n\n// It returns a promise that is resolved when the animation is finished\nconst sequence = async () => {\n  const slide = document.getElementById('slide-3')\n  // First smooth scroll to hero\n  await scrollIntoView(node, { behavior: 'smooth' })\n  // Then we scroll to a slide in a slideshow\n  return scrollIntoView(slide, { behavior: 'smooth' })\n}\n```\n\n### Custom scrolling transition\n\nIf the default smooth scrolling ponyfill isn't the duration or easing you want, you 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, scrollTop, scrollLeft]) => {\n      // implement the scroll anyway you want\n      el.scrollTop = scrollTop\n      el.scrollLeft = scrollLeft\n\n      // If you need the relative scroll coordinates, for things like window.scrollBy style logic, just do the math\n      const offsetTop = el.scrollTop - scrollTop\n      const offsetLeft = el.scrollLeft - scrollLeft\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","license":"MIT","release":{"generateNotes":"semantic-release-tamia/generateNotes","verifyRelease":"semantic-release-tamia/verifyRelease","analyzeCommits":"semantic-release-tamia/analyzeCommits","verifyConditions":"condition-circle"},"scripts":{"dev":"concurrently 'tsc --watch' 'yarn build:cjs --watch'","build":"yarn build:cjs && yarn build:es && yarn build:umd && yarn build:umd.min","clean":"rimraf 'umd' 'es'","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","typecheck":"tsc","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","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"typings":"typings/index.d.ts","_npmUser":{"name":"stipsan","email":"stipsan@gmail.com"},"homepage":"https://stipsan.github.io/scroll-into-view-if-needed","keywords":["behavior-smooth","if-needed","polyfill","ponyfill","scroll","scroll-into-view","scrollIntoView","scrollIntoViewIfNeeded","scrollMode","smooth","smoothscroll","typescript"],"browserify":{"transform":["loose-envify"]},"repository":{"url":"git+https://github.com/stipsan/scroll-into-view-if-needed.git","type":"git"},"description":"Ponyfill for upcoming Element.scrollIntoView() APIs like scrollMode: if-needed, behavior: smooth and block: center","directories":{},"maintainers":[{"name":"stipsan","email":"stipsan@gmail.com"}],"sideEffects":false,"dependencies":{"warning":"3.0.0","invariant":"2.2.4"},"publishConfig":{"tag":"next"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"rimraf":"2.6.2","rollup":"0.58.1","@babel/cli":"7.0.0-beta.44","typescript":"2.8.3","@babel/core":"7.0.0-beta.44","concurrently":"3.5.1","release-relief":"1.0.1","@babel/preset-env":"7.0.0-beta.44","rollup-plugin-babel":"4.0.0-beta.4","rollup-plugin-uglify":"3.0.0","rollup-plugin-replace":"2.0.0","rollup-plugin-commonjs":"9.1.0","@babel/preset-typescript":"7.0.0-beta.44","rollup-plugin-node-resolve":"3.3.0","babel-plugin-dev-expression":"0.2.1","@babel/plugin-external-helpers":"7.0.0-beta.44","babel-plugin-styled-components":"1.5.1","babel-plugin-add-module-exports":"0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/scroll-into-view-if-needed_2.0.0-alpha.d4e115e7_1524430137212_0.32854435071869026","host":"s3://npm-registry-packages"},"_id":"scroll-into-view-if-needed@2.0.0-alpha.d4e115e7","version":"2.0.0-alpha.d4e115e7"}