{"id":17149590,"url":"https://github.com/martinlaxenaire/scroll-observer","last_synced_at":"2025-10-10T04:33:44.375Z","repository":{"id":53674361,"uuid":"292856359","full_name":"martinlaxenaire/scroll-observer","owner":"martinlaxenaire","description":"Really simple Intersection Observer helper","archived":false,"fork":false,"pushed_at":"2021-03-22T09:33:06.000Z","size":34,"stargazers_count":52,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-10T04:33:39.461Z","etag":null,"topics":["intersection-observer","intersectionobserver-api","javascript","vanilla-javascript"],"latest_commit_sha":null,"homepage":"","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/martinlaxenaire.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-04T13:34:12.000Z","updated_at":"2025-09-29T14:12:41.000Z","dependencies_parsed_at":"2022-09-11T09:10:23.289Z","dependency_job_id":null,"html_url":"https://github.com/martinlaxenaire/scroll-observer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/martinlaxenaire/scroll-observer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinlaxenaire%2Fscroll-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinlaxenaire%2Fscroll-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinlaxenaire%2Fscroll-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinlaxenaire%2Fscroll-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martinlaxenaire","download_url":"https://codeload.github.com/martinlaxenaire/scroll-observer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinlaxenaire%2Fscroll-observer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002671,"owners_count":26083442,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["intersection-observer","intersectionobserver-api","javascript","vanilla-javascript"],"created_at":"2024-10-14T21:33:31.200Z","updated_at":"2025-10-10T04:33:44.358Z","avatar_url":"https://github.com/martinlaxenaire.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Lightweight vanilla javascript library to handle intersection observers\n\n\u003ch2\u003eInitializing\u003c/h2\u003e\n    \n```javascript\nimport {ScrollObserver} from './src/scroll.observer.js';\n\nconst scrollObserver = new ScrollObserver();\n```\n\nIn a browser, you can use the UMD files located in the `dist` directory:\n    \n```html\n\u003cscript src=\"dist/scroll.observer.umd.js\"\u003e\u003c/script\u003e\n```\n\n\n```javascript\nconst scrollObserver = new ScrollObserver();\n```\n\n\u003ch3\u003eParameters\u003c/h3\u003e\n\n\u003ch4\u003eBasic params\u003c/h4\u003e\n\nThe basic parameters you can specify are the same you'd use with an intersection observer (see https://developer.mozilla.org/fr/docs/Web/API/Intersection_Observer_API):\n\n| Parameter  | Type | Default | Description |\n| --- | --- | --- | --- |\n| root  | CSS selector | \"viewport\" | Root intersection observer parameter |\n| rootMargin | String | \"0px\" | Root margins to use |\n| threshold | array | 0 | Array of thresholds that will trigger the callback function |\n\n```javascript\nconst scrollObserver = new ScrollObserver({\n    // root\n    root: document.getElementById(\"content\"),\n    // rootMargins\n    rootMargin: \"20px 0\",\n    // threshold array\n    threshold: [0, 0.25, 0.5, 0.75, 1]\n});\n```\n\n\u003ch3\u003eObserve elements\u003c/h3\u003e\n\nOnce you've created an observer, you need to observe elements.\n\nYou can add one or multiple elements to observe thanks to the `observe()` method:\n\n```javascript\nscrollObserver.observe({\n    // elements to observe\n    elements: document.querySelectorAll(\".scroll-observed-el\")\n});\n```\n\nYou can use a CSS selector instead of a list of elements:\n\n```javascript\n// exactly the same as above\nscrollObserver.observe({\n    // elements to observe specified with a selector\n    selector: \".scroll-observed-el\"\n});\n```\n\nThere are 3 callbacks that you can use when observing an element, `onBeforeElVisible()`, `onElVisible()` and `onElHidden`, trigger by the intersection observer based on the `root`, `rootMargin` and `threshold` parameters:\n\n```javascript\nscrollObserver.observe({\n    // elements to observe\n    elements: document.querySelectorAll(\".scroll-observed-el\"),\n    // wait for 200ms (cumulative) each time one of this element is visible\n    stagger: 200,\n    // an \".scroll-observed-el\" element became visible\n    onBeforeElVisible: (observedEl) =\u003e {\n        // observedEl is an object containing the original HTML element, its bounding rectangle and other properties\n        console.log(observedEl);\n    },\n    // an \".scroll-observed-el\" element became visible and its staggering timeout has run\n    onElVisible: (observedEl) =\u003e {\n        // observedEl is an object containing the original HTML element, its bounding rectangle and other properties\n        console.log(observedEl);\n    },\n    // an \".scroll-observed-el\" element became hidden\n    onElHidden: (observedEl) =\u003e {\n        // observedEl is an object containing the original HTML element, its bounding rectangle and other properties\n        console.log(observedEl);\n    },\n});\n```\n\n\u003ch4\u003eComplete parameter list\u003c/h4\u003e\n\nHere is a complete list of all `observe()` method parameters:\n\n| Parameter  | Type | Default | Description |\n| --- | --- | --- | --- |\n| elements  | array of HTML elements | [] | elements to observe |\n| selector | string | null | elements to observe based on a CSS selector |\n| keepObserving | bool | false | Whether we should keep observing the element after it has been in and out of view |\n| triggerRatio | float between 0 and 1 | 0 | The ratio at which the visible/hidden callback should be called |\n| alwaysTrigger | bool | true | Whether it should trigger the visible callback multiple times or just once |\n| stagger | float | 0 | Number of milliseconds to wait before calling the visible callback (used for staggering animations) |\n| onBeforeElVisible | function(observedEl) | void | Function to execute right when this element become visible. Use it to change this element staggering property for example |\n| onElVisible | function(observedEl) | void | Function to execute when this element become visible, after the staggering timeout |\n| onElHidden | function(observedEl) | void | Function to execute when this element become hidden |\n\n\n\u003ch3\u003eUnobserve elements\u003c/h3\u003e\n\nYou can decide to stop observing elements whenever you want.\n\n\u003ch4\u003eUnobserving one element\u003c/h4\u003e\n\nYou can pass a HTML element to the `unobserveEl()` method:\n\n```javascript\nscrollObserver.unobserveEl(document.getElementById(\"observed-el\"));\n```\n\n\u003ch4\u003eUnobserving multiple elements\u003c/h4\u003e\n\nYou can pass an array of elements to the `unobserveEls()` method:\n\n```javascript\nscrollObserver.unobserveEls(document.querySelectorAll(\".scroll-observed-el\"));\n```\n\n\u003ch4\u003eUnobserving all elements and disconnect observer\u003c/h4\u003e\n\nYou can also decide to unobserve all elements and disconnect your observer:\n\n```javascript\nscrollObserver.unobserveAll();\n```\n\n\n\u003ch3\u003eEvents\u003c/h3\u003e\n\nThere are 4 events you can use, `onError()`, `onBeforeElVisible()`, `onElVisible()` and `onElHidden()`:\n\n```javascript\nscrollObserver.onError(() =\u003e {\n    // intersection observer API is not supported, do something\n}).onBeforeElVisible((observedEl) =\u003e {\n    // called each time an observed element become visible\n    console.log(observedEl);\n}).onElVisible((observedEl) =\u003e {\n    // called each time an observed element become visible but after its staggering timeout\n    console.log(observedEl);\n}).onElHidden((observedEl) =\u003e {\n    // called each time an observed element become hidden\n    console.log(observedEl);\n});\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinlaxenaire%2Fscroll-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartinlaxenaire%2Fscroll-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinlaxenaire%2Fscroll-observer/lists"}