{"dist":{"shasum":"f1d0e83cfeb18142324fa0ebe24276de727231a2","tarball":"https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.0.1-alpha.1.tgz","fileCount":14,"integrity":"sha512-nwdmEPeZrMnXLvfGZDuh9IPdKB3xBR1GzOm+ZLoGkbZkhIuUPan68zqMDk3hgmubS1nrDHTriv2TDB1i5R1qzw==","signatures":[{"sig":"MEUCIENdePR4G8vuDPtBfr9Yyz1af4dkBhx2AXRXseEh2Mi1AiEA1BwcMhmhoRxkFTn/mN2ALY0Bss0YW+9UiPURweXhTX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa5J2CCRA9TVsSAnZWagAA6/wQAI6ATY446eowMGkeyQnh\n7sfx7zYIy+S/ebqHrTw/2k9nZF1fdO+xFQ2ZR2d47eMPcWVvVGwpJEZSNBo3\nVl/k4US0g4y7t4XhaWjoIPJOajQe5CMEUnu8Rv0D1yiM4544AILR32Gk8uzI\nHvAcOnURseWKE0lFrUz1rHHc5a7REzad1kvzgtvNyMvUjxo3IcUhqt/hEhHt\nsz/uVN3npucZKHQ1QAgIDn34izurpHZn/h/fFTorEhLfbjVMMPVkLCaHKNvr\nWxrl7gkDylVeMmL39BK+ZW9SgZHL436PSPZXT0BtnjsW2UxHRKBpSr4y99f4\nSicwCCa0Hf3Iw+de9ptdzxHoSiLMF1Fv0D37QB0UdnnVL3zj0dBlcZboX1yC\nOY97mVoekizZ4X0XGJcKX3mLaLdMt7KPyr4ODEbAkAvwl6QY/dJ6zJxYDNvg\nsUF37WLvz+F/h/aMY5nEpP9I4pE200fjgpfbzz+imgnHSexrC1uGMYH+bzDI\n39n/UuMNkfRruAzt28Zc4ve3erAI4Ihj5P/BGBHk3PG+27K+hJRwcXZP5rQV\njDFnFsfZT57B1K+7uZLeZzoVUrB9dOsBvVrOw7pgINFGbogmRKXwVdc25msK\nnC2jAVsIgXCeKALgfnpxpO9PY3Q3GcPsLjancK1RglbbtGRREhV89sU9/0RY\nnJVv\r\n=40xu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"scroll-into-view-if-needed","files":["compute.js","es","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)\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 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\nyour 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,\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, 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":{"prepare":["@semantic-release/npm"],"verifyConditions":["@semantic-release/npm","@semantic-release/github"]},"scripts":{"dev":"concurrently 'tsc --watch' 'yarn build:cjs --watch'","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","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://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.2","@babel/cli":"7.0.0-beta.46","typescript":"2.8.3","@babel/core":"7.0.0-beta.46","concurrently":"3.5.1","semantic-release":"15.1.7","@babel/preset-env":"7.0.0-beta.46","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.46","semantic-release-monorepo":"6.0.1","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.0.1-alpha.1_1524931969154_0.6609437425609175","host":"s3://npm-registry-packages"},"_id":"scroll-into-view-if-needed@2.0.1-alpha.1","version":"2.0.1-alpha.1"}