{"id":15184744,"url":"https://github.com/princemaple/scroll-trigger","last_synced_at":"2025-10-01T23:30:53.045Z","repository":{"id":29137375,"uuid":"32667399","full_name":"princemaple/scroll-trigger","owner":"princemaple","description":"Angular module that triggers actions on scrolling to a point","archived":true,"fork":false,"pushed_at":"2017-05-22T07:57:48.000Z","size":54,"stargazers_count":63,"open_issues_count":0,"forks_count":11,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-01-15T11:15:42.952Z","etag":null,"topics":["angular1","scrolling","trigger-actions"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/princemaple.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-22T08:08:46.000Z","updated_at":"2023-01-28T19:25:57.000Z","dependencies_parsed_at":"2022-09-09T17:12:19.394Z","dependency_job_id":null,"html_url":"https://github.com/princemaple/scroll-trigger","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/princemaple%2Fscroll-trigger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princemaple%2Fscroll-trigger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princemaple%2Fscroll-trigger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princemaple%2Fscroll-trigger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/princemaple","download_url":"https://codeload.github.com/princemaple/scroll-trigger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234909088,"owners_count":18905505,"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":["angular1","scrolling","trigger-actions"],"created_at":"2024-09-27T17:23:00.516Z","updated_at":"2025-10-01T23:30:52.769Z","avatar_url":"https://github.com/princemaple.png","language":"HTML","readme":"# scroll-trigger\n\n[![npm version](https://badge.fury.io/js/angular-scroll-trigger.svg)](https://badge.fury.io/js/angular-scroll-trigger)\n[![Bower version](https://badge.fury.io/bo/scroll-trigger.svg)](https://badge.fury.io/bo/scroll-trigger)\n\n### Read the tests as `How to use` :)\n\n\u003e Trigger actions on scroll to a point\n\nThis module is based on [img-src-ondemand][1], the other module that I wrote\nsome time ago to delay image loading to only when they appear on screen.\nRecently, I wanted to write a new infinite scroll library to replace the use of\n[ngInfiniteScroll][2] which I don't like so much. Reason being it requires you\nto pass a selector or a selector function as setup so the service can find the\ninfinite scroll container. This doesn't work well if the container is somewhere\nin a route view. The container should be able to reach the service, so that\ndoesn't matter where it's put, it can work. After some thought, I realized that\nthe logic it requires here is already written in my previous library. Now, I\nextracted the logic and generalized it, so it can be used in a much wider range.\n\n### Demo\nSome demos. Scroll down slowly.\n\n- [Img Src Ondemand replicate](http://plnkr.co/edit/JWFntSUoMewTj9hULfD1?p=preview)\n- [Infinite Scroll implementation](http://plnkr.co/edit/Xmncmy3IaNWUL6h3l1zZ?p=preview)\n- [Scroll to animate](http://plnkr.co/edit/ZkQjCVQWZGay5JEmIvKV?p=preview)\n\n\n### Usage\n\n`How to use` can be found in [tests][3]\n\n**The tests are both `tests` and `examples`**\n\nSee [reference](#reference) is at the end\n\n#### Examples/Tests\n|                                                     Example / Test name                                                      |                                                     Functionality                                                     |\n|------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------|\n| [test_img_src_ondemand](https://github.com/princemaple/scroll-trigger/blob/master/test/test_img_src_ondemand.html)           | shows how to reproduce the functionality of `img-src-ondemand` module                                                 |\n| [test_infinite_scroll](https://github.com/princemaple/scroll-trigger/blob/master/test/test_infinite_scroll.html)             | shows how to implement infinite scroll with this module                                                               |\n| [test_scroll_to_animate](https://github.com/princemaple/scroll-trigger/blob/master/test/test_scroll_to_animate.html)         | shows how to implement common animation trigger on scrolling to                                                       |\n| [test_scroll_to_end](https://github.com/princemaple/scroll-trigger/blob/master/test/test_scroll_to_end.html)                 | shows how to trigger the action at the end instead of at the beginning                                                |\n| [test_scroll_container](https://github.com/princemaple/scroll-trigger/blob/master/test/test_scroll_container.html)           | shows how to achieve the same effect with a container instead of `window`                                             |\n| [test_lazy_img_in_container](https://github.com/princemaple/scroll-trigger/blob/master/test/test_lazy_img_in_container.html) | shows how to lazy load images in a container that is not `window`                                                     |\n| [test_interval](https://github.com/princemaple/scroll-trigger/blob/master/test/test_interval.html)                           | shows how to check and trigger action more / less often                                                               |\n| [test_offset](https://github.com/princemaple/scroll-trigger/blob/master/test/test_offset.html)                               | shows how to trigger action in advance / with delay in terms of screen position                                       |\n| [test_trigger_run](https://github.com/princemaple/scroll-trigger/blob/master/test/test_trigger_run.html)                     | shows how to run the action once on load regardless of the screen position                                            |\n| [test_trigger_active](https://github.com/princemaple/scroll-trigger/blob/master/test/test_trigger_active.html)               | shows how to conditionally trigger action                                                                             |\n| [test_scope](https://github.com/princemaple/scroll-trigger/blob/master/test/test_scope.html)                                 | shows scrollTrigger can access the scope on the element, and is able to call functions / retreive data from the scope |\n| [test_multiple](https://github.com/princemaple/scroll-trigger/blob/master/test/test_multiple.html)                           |                                                                                                                       |\n| [test_scroll](https://github.com/princemaple/scroll-trigger/blob/master/test/test_scroll.html)                               |                                                                                                                       |\n\n[1]: https://github.com/princemaple/img-src-ondemand\n[2]: https://github.com/sroze/ngInfiniteScroll\n[3]: https://github.com/princemaple/scroll-trigger/tree/master/test\n[4]: http://plnkr.co/edit/JWFntSUoMewTj9hULfD1?p=preview\n\n### Reference\n\n```html\n\u003cdiv scroll-trigger=\"doSomething()\"\u003e\u003c/div\u003e\n```\n\n#### Available Attributes\n- `trigger-run`: runs the trigger when the page is loaded regardless of the relative position of the element\n- `trigger-at-end`: instead of triggering when the top of the element enters the screen, trigger at the end\n- `trigger-persist`: do not remove the trigger (event listener) after it has been triggered\n- `trigger-active`: conditionally check screen position\n- `scroll-container`: instead of listening on `window`, listen on a specific container\n- `scroll-trigger-id`: manually assign a unique identifier\n\n#### Available configuration\n- `offset`: gives you adjustable space\n- `interval`: gives you adjustable timing\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprincemaple%2Fscroll-trigger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprincemaple%2Fscroll-trigger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprincemaple%2Fscroll-trigger/lists"}