{"bugs":{"url":"https://github.com/stipsan/scroll-into-view-if-needed/issues"},"dist":{"shasum":"44737d3f0942a7e679f588a1d1cc4bb0c737b120","tarball":"https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.0.0-alpha.3.tgz","fileCount":12,"integrity":"sha512-+wUHBHyT7DNMzItv/dt095qJY0kSknJULx6ufRyoWMmNQ2VXi4J5M1G3kEUbTubQazBQ85q6DcFNwJfL+0Y9Rw==","signatures":[{"sig":"MEYCIQCyKAo6jjGjWY7KDsWfaP5IlCUjLhlqFbub1YMpwVrnSQIhAKHV/1xxV3q9HS8o3bOxoZb+n3ux/rPtvur1zWtowD/y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":59324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3NaZCRA9TVsSAnZWagAAiX4P/2/+gHnaiXBqrgRtHIRI\nrLEJfN8p1dBvVn/JXEMAReEBzB3r35TdRTUQ6MAmNbZBdF52C7V+T2x9Ymsh\no+VjUWZdzuI2Saj1IgzvV5DGGDFsc95bs/RaCLuLg1gIH5l3nc6idwuI3YaD\n0ekjesoevkHvPNrDOjPU4iRGekmDLccCQCbT/5V9LNx9t8LCQDqRiG6eT3ea\n8pJ8ah/5q5aAjGUowvP4VHDp2m/kgdoc5q2c4bufXluoymAq4j+Cq6ezdgN+\nvIp/d3u0O9BGuj//CKi9eia9LTm8tvD1VitmG+vbk8dIVvViwr0xZgAFmLwS\ncMWW0Hqu6DRlliJ0c+yVfLFmHsui4gYq8YxZYLLM+Lfv8oE0dY26esTQ9K0t\nbd+91l1akPulYzBdNfxGZfaOSS5uz5BjtuvLAAhJ+vqFPgC1/1hrWIkq3vsl\nddWiJ14k4Pw4SbdDEK0havNqDo6nK7JFFgBwrSKFWAC76qYV/Ykp/+SMXJuF\nkOPt7kGIdGZh91WoPR6J3MJNoqXcwYO30x2EZsJ3LaGefev+KRnLhDYo1gRt\n2c0ZWcCg9mOSceNYm231YtlqpVVjThmUDGoavoyzc6lb81zHPG+0PndelSuY\nzaWOzPS3yFl0VIrMkxvfH8Z8bMK3m++JEbnTa28iEDQqqpvnt1sCY/qeDPou\n8sYQ\r\n=dqA4\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"},"_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","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.3_1524422296767_0.8304428055981343","host":"s3://npm-registry-packages"},"_id":"scroll-into-view-if-needed@2.0.0-alpha.3","version":"2.0.0-alpha.3"}