{"id":13722608,"url":"https://github.com/KoryNunn/scroll-into-view","last_synced_at":"2025-05-07T15:30:48.789Z","repository":{"id":11593653,"uuid":"14084913","full_name":"KoryNunn/scroll-into-view","owner":"KoryNunn","description":"Scrolls an element into view if possible","archived":false,"fork":false,"pushed_at":"2022-06-27T23:26:19.000Z","size":5017,"stargazers_count":350,"open_issues_count":1,"forks_count":58,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-01T11:37:03.664Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KoryNunn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["korynunn"],"patreon":"korynunn","open_collective":"korynunn"}},"created_at":"2013-11-03T12:21:06.000Z","updated_at":"2025-03-23T09:52:32.000Z","dependencies_parsed_at":"2022-07-15T18:00:30.552Z","dependency_job_id":null,"html_url":"https://github.com/KoryNunn/scroll-into-view","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoryNunn%2Fscroll-into-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoryNunn%2Fscroll-into-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoryNunn%2Fscroll-into-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoryNunn%2Fscroll-into-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KoryNunn","download_url":"https://codeload.github.com/KoryNunn/scroll-into-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252868593,"owners_count":21816893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:01:30.791Z","updated_at":"2025-05-07T15:30:46.679Z","avatar_url":"https://github.com/KoryNunn.png","language":"JavaScript","funding_links":["https://github.com/sponsors/korynunn","https://patreon.com/korynunn","https://opencollective.com/korynunn","https://patreon.com/user/korynunn","https://opencollective.com/scroll-into-view"],"categories":["Source Code"],"sub_categories":[],"readme":"\n![scroll-into-view](/scrollintoview.png) ![example-gif](/scrollIntoViewExample.gif)\n\n[![Build Status](https://travis-ci.org/KoryNunn/scroll-into-view.svg?branch=master)](https://travis-ci.org/KoryNunn/scroll-into-view)\n[![Backers on Open Collective](https://opencollective.com/scroll-into-view/backers/badge.svg)](#backers)\n[![Sponsors on Open Collective](https://opencollective.com/scroll-into-view/sponsors/badge.svg)](#sponsors)\n## What\n\nScrolls an element into view\n\nAlso scrolls any scroll-parents so that the element is in view.\n\n## Donating\n\nIf you want to show your support financially, [I'm on Patreon](https://patreon.com/user/korynunn)\n\n## Example\n\n[Example](http://korynunn.github.io/scroll-into-view/example/)\n\n## How\n\nrequire it\n```javascript\nvar scrollIntoView = require('scroll-into-view');\n```\nuse it\n\n```javascript\nscrollIntoView(someElement);\n```\n\nYou can pass settings to control the time, easing, and whether or not a parent is a valid element to scroll, and alignment:\n\nAll options are optional.\n\n```javascript\nscrollIntoView(someElement, {\n\n    time: 500, // half a second\n\n\n    ease: function(value){\n        return Math.pow(value,2) - value; // Do something weird.\n    },\n\n    validTarget: function(target, parentsScrolled){\n\n        // Only scroll the first two elements that don't have the class \"dontScroll\"\n        // Element.matches is not supported in IE11, consider using Element.prototype.msMatchesSelector if you need to support that browser\n\n        return parentsScrolled \u003c 2 \u0026\u0026 target !== window \u0026\u0026 !target.matches('.dontScroll');\n    },\n\n    align:{\n        top: 0 to 1, default 0.5 (center)\n        left: 0 to 1, default 0.5 (center)\n        topOffset: pixels to offset top alignment\n        leftOffset: pixels to offset left alignment,\n        lockX: boolean to prevent X scrolling,\n        lockY: boolean to prevent Y scrolling\n    },\n\n    isScrollable: function(target, defaultIsScrollable){\n\n        // By default scroll-into-view will only attempt to scroll elements that have overflow not set to `\"hidden\"` and who's scroll width/height is larger than their client height.\n        // You can override this check by passing an `isScrollable` function to settings:\n\n        return defaultIsScrollable(target) || target !== window \u0026\u0026 ~target.className.indexOf('scrollable');\n    },\n\n    isWindow: function(target){\n        // If you need special detection of the window object for some reason, you can do it here.\n        return target.self === target;\n    },\n\n    cancellable: true, // default is true, set to false to prevent users from cancelling the scroll with a touch or mousewheel\n\n    maxSynchronousAlignments: 3, // default is 3. Maximum number of times to try and align elements synchronously before completing.\n\n    debug: true // default is false. This will spit out some logs that can help you understand what scroll-into-view is doing if it isn't doing what you expect.\n});\n```\n\nYou can pass a callback that will be called when all scrolling has been completed or canceled.\n\n```javascript\nscrollIntoView(someElement [, settings], function(type){\n    // Scrolling done.\n    // type will be 'complete' if the scroll completed or 'canceled' if the current scroll was canceled by a new scroll\n});\n```\n\nYou can cancel the current scroll by using the cancel function returned by scrollIntoView:\n\n```javascript\nvar cancel = scrollIntoView(someElement);\n\n// ... later ...\n\ncancel()\n```\n\n## Size\n\nSmall. ~3.03 KB for the standalone.\n\n## Changelog\n\n[View Changeog](https://changelogit.korynunn.com/#korynunn/scroll-into-view)\n\n## Testing\n\nTesting scrolling is really hard without stuff like webdriver, but what's there works ok for the moment.\n\nThe tests will attempt to launch google-chrome. If you don't have chrome, lol just kidding you do.\n\n```\nnpm run test\n```\n\n# Standalone\n\nIf you want to use this module without browserify, you can use `scrollIntoView.min.js`\n\n```\n\u003cscript src=\"scrollIntoView.min.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n    window.scrollIntoView(someElement);\n\u003c/script\u003e\n```\n\n# Browser support\n\nAll evergreen browsers are supported.\n\nYes this means IE11 is not supported, scroll-into-view has the same support targets as microsoft: https://www.zdnet.com/article/microsoft-sets-deadline-for-end-of-support-of-ie-11-by-365-apps/ \n\n## Contributors\n\nThis project exists thanks to all the people who contribute.\n\u003ca href=\"https://github.com/KoryNunn/scroll-into-view/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/scroll-into-view/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/scroll-into-view#backer)]\n\n\u003ca href=\"https://opencollective.com/scroll-into-view#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/scroll-into-view/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/scroll-into-view#sponsor)]\n\n\u003ca href=\"https://opencollective.com/scroll-into-view/sponsor/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/scroll-into-view/sponsor/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/scroll-into-view/sponsor/1/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/scroll-into-view/sponsor/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/scroll-into-view/sponsor/2/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/scroll-into-view/sponsor/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/scroll-into-view/sponsor/3/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/scroll-into-view/sponsor/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/scroll-into-view/sponsor/4/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/scroll-into-view/sponsor/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/scroll-into-view/sponsor/5/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/scroll-into-view/sponsor/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/scroll-into-view/sponsor/6/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/scroll-into-view/sponsor/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/scroll-into-view/sponsor/7/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/scroll-into-view/sponsor/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/scroll-into-view/sponsor/8/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/scroll-into-view/sponsor/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/scroll-into-view/sponsor/9/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/scroll-into-view/sponsor/9/avatar.svg\"\u003e\u003c/a\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKoryNunn%2Fscroll-into-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKoryNunn%2Fscroll-into-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKoryNunn%2Fscroll-into-view/lists"}