{"bugs":{"url":"https://github.com/stipsan/scroll-into-view-if-needed/issues"},"dist":{"shasum":"a992dbf3597a11f1699ec4a788430c581e8b2acd","tarball":"https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.0.0.tgz","fileCount":13,"integrity":"sha512-nI62ln3mSk0Fut9OKeFWIpHrASApX8s8cGYyzrEoqV32B7UPVgiCoidXTWGrzI+wjE2Vbt8ttCkYasm4xKy2zQ==","signatures":[{"sig":"MEYCIQC14mAJm7XviavZk1dScH3dhBzWQCWyhRo4ba9YVLhIXwIhAOluoXJMlUaSmZ2HSBnIH/Y62i6tdGlSUpKMwYIqUmiH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3QvMCRA9TVsSAnZWagAADLUP/1134eY8RO+FirpPGVAw\nryZRi8RuXB0eFFtPD59Mk6uMkWdCSfh5XS871h0f2mNymd28QgqTO3LovfSP\ndf6Ietx0FLdaxTOSxOYyxbmnQGZgbkW+i2EiGPqxBjVHREMSR2SlymqkL7Gf\nbyTsMazv6OPr59+aiHR5bvODV34BLipBc6aTK+v2qq5e6tB9JNqsaJNAGIMR\nhanq0dyshKW06igYTxlF7rcW6E47AJHzOE8j2SOysvS5T45NXBkAi+2qeKU3\nnPwypNR2TRc1J5FzxuMQ1VwkfSMMRH0xt5YG2Ljaf6bGI6t04xnaoWGjHYA2\neA9U3XGOZmh3x2ilV74JrJDqvN1Z669nKdXR6A+LQHM1k2iC4U2C8mmkh9+X\nim9l4/X2iH5iTIy4hUuc4q06gMPGbM1309mIvFdeT2DFEthyOEiT+2oZNKXc\n1podJ4IuQkMJj2swfG9Yxbg0hqtZj8xz+E3Am8wVCrUBHltkvjqfcsv1s6fO\nGV7EVqNK9qAMkTdRBm9xNRC7L8dL21Vv3K7b5VVhfHMx/TptVOqCPyhAHUMn\n7J2QSp3HBi+EK5SuT7j9pNyegumUeDeRkLWTZVImEU4D6UyxSJirYN34ptI3\n5MwDgAs4H0JYfC6zhQhYyZLr4fj8yvQsxWDuVa6NC3jVBE4W19itORPgXE+O\n0nVM\r\n=+8ve\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","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"},"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"},"_npmVersion":"5.5.1","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,"_nodeVersion":"8.9.1","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","@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_1524435915592_0.15004331511969404","host":"s3://npm-registry-packages"},"_id":"scroll-into-view-if-needed@2.0.0","version":"2.0.0"}