{"id":24375994,"url":"https://github.com/betaweb/intersectr","last_synced_at":"2026-02-10T23:03:40.477Z","repository":{"id":56251275,"uuid":"267005979","full_name":"betaWeb/intersectr","owner":"betaWeb","description":"An easy-to-use wrapper class over intersection observer API.","archived":false,"fork":false,"pushed_at":"2023-07-12T11:57:09.000Z","size":748,"stargazers_count":3,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-17T13:18:13.141Z","etag":null,"topics":["api","browser","class","easy","easy-to-use","intersection","intersection-observer","javascript","observer","observer-pattern","wrapper"],"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/betaWeb.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-05-26T09:54:20.000Z","updated_at":"2020-11-18T13:19:03.000Z","dependencies_parsed_at":"2025-04-10T19:40:37.869Z","dependency_job_id":"bb521ff2-103d-481e-b0ff-77f6d8fc79d1","html_url":"https://github.com/betaWeb/intersectr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/betaWeb/intersectr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betaWeb%2Fintersectr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betaWeb%2Fintersectr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betaWeb%2Fintersectr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betaWeb%2Fintersectr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/betaWeb","download_url":"https://codeload.github.com/betaWeb/intersectr/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betaWeb%2Fintersectr/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260927348,"owners_count":23083997,"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":["api","browser","class","easy","easy-to-use","intersection","intersection-observer","javascript","observer","observer-pattern","wrapper"],"created_at":"2025-01-19T05:58:59.528Z","updated_at":"2026-02-10T23:03:40.470Z","avatar_url":"https://github.com/betaWeb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# intersectr\nAn esay-to-use wrapper class over intersection observer API.\n\nYou can find a simple demo [here](https://codepen.io/betaweb/pen/eYpaLLB).\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Getting started\n\n### Installation\nYou just have to import `Intersectr.min.js` class into your HTML page (you can find it on the `dist` folder of this repository) :\n```html\n\u003cscript type=\"text/javascript\" src=\"/path/to/Intersectr.min.js\" defer\u003e\u003c/script\u003e\n```\n\n\u003e Intersectr is compatible with IE11+ (it includes a polyfill of intersection-observer API) and is supported by all modern browsers.\n\n\u003cbr\u003e\n\n### Basic usage\n\nAnd you can use Intersectr class like so :\n```javascript\ndocument.addEventListener('DOMContentLoaded', _ =\u003e {\n\n\tconst intersectr = new Intersectr()\n\n\tintersectr.intersect('.my-item', (intersecting, entry) =\u003e {\n\t\tif (intersecting) {\n\t\t\tentry.target.classList.add('intersected')\n\t\t\tentry.unobserve(true)\n\t\t}\n\t})\n\n})\n```\nAnd.. That's it ! Easy, isn't it ? :)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### API\n\nIntersectr comes with a very simple API.\n\n#### observe\n\nUnobserves the HTML element defined by the `target` parameter, and triggers the callback when its visible (depends on the global threshold ratio(s)).\n\n```typescript\nIntersectr.observe(\n\ttarget: Element|String, \n\tcallback: Function(entry: IntersectionObserverEntry)\n): Intersectr\n```\n\n*Example :*\n```javascript\nintersectr.observe('.my-item', entry =\u003e {\n\tif (entry.isIntersecting) {\n\t\tentry.target.classList.add('intersected')\n\t\tentry.unobserve(true)\n\t}\n})\n```\n\n\u003cbr\u003e\n\n#### unobserve\n\nUnobserves the HTML element defined by the `target` parameter. It deletes observables callbacks if `soft` parameter is false, does nothing otehrwise (useful with the `refresh()` method).\n\n```typescript\nIntersectr.unobserve(\n\ttarget: Element|String, \n\tsoft: Boolean = true\n): Intersectr\n```\n\n*Example :*\n```javascript\nintersectr.unobserve('.my-item', true)\n```\n\n\u003cbr\u003e\n\n\n#### intersect\n\nObserves the HTML element defined by the `target` parameter, and triggers the callback when its visible.\nThe main difference with the `observe()` method is that the callback function will expose `intersecting` parameter which is true if teh element is intersecting, false otherwise (depends on the global threshold ratio(s)).\n\n```typescript\nIntersectr.intersect(\n\ttarget: Element|String, \n\tcallback: Function(intersecting: Boolean, entry: IntersectionObserverEntry)\n): Intersectr\n```\n\n*Example :*\n```javascript\nintersectr.intersect('.my-item', (intersecting, entry) =\u003e {\n\tif (intersecting) {\n\t\tentry.target.classList.add('intersected')\n\t\tentry.unobserve(true)\n\t}\n})\n```\n\n\u003cbr\u003e\n\n#### intersectFrom\nIntersecting from an intersection ratio.\n\n```typescript\nIntersectr.intersectFrom(\n\ttarget: Element|String, \n\tratio: Number, \n\tcallback: Function(intersecting: Boolean, entry: IntersectionObserverEntry)\n): Intersectr\n```\n\n*Example :*\n```javascript\nintersectr.intersectFrom('.my-item', .3, (intersecting, entry) =\u003e {\n\tif (intersecting) {\n\t\tentry.target.classList.add('intersected')\n\t\tentry.unobserve(true)\n\t}\n})\n```\n\n\u003cbr\u003e\n\n#### intersectUntil\nIntersecting until an intersection ratio.\n\n```typescript\nIntersectr.intersectUntil(\n\ttarget: Element|String, \n\tratio: Number, \n\tcallback: Function(intersecting: Boolean, entry: IntersectionObserverEntry)\n): Intersectr\n```\n\n*Example :*\n```javascript\nintersectr.intersectUntil('.my-item', .8, (intersecting, entry) =\u003e {\n\tif (intersecting) {\n\t\tentry.target.classList.add('intersected')\n\t\tentry.unobserve(true)\n\t}\n})\n```\n\n\u003cbr\u003e\n\n#### intersectBetween\nIntersecting between intersection ratios.\n\n```typescript\nIntersectr.intersectBetween(\n\ttarget: Element|String, \n\tratios: Number[], \n\tcallback: Function(intersecting: Boolean, entry: IntersectionObserverEntry)\n): Intersectr\n```\n*Example :*\n```javascript\nintersectr.intersectBetween('.my-item', [.3, .8], (intersecting, entry) =\u003e {\n\tif (intersecting) {\n\t\tentry.target.classList.add('intersected')\n\t\tentry.unobserve(true)\n\t}\n})\n```\n\n\u003cbr\u003e\n\n#### refresh\nRefresh all observers. Useful to observe again 'soft' unobserved entries.\n\n```typescript\nIntersectr.refresh(): Intersectr\n```\n*Example :*\n```javascript\nintersectr.intersectBetween('.my-item', [.3, .8], (intersecting, entry) =\u003e {\n\tif (intersecting) {\n\t\tentry.target.classList.add('intersected')\n\t\tentry.unobserve(true) // soft unobserve\n\t}\n})\n\n// ...\n\nintersectr.refresh() // will observe again the 'soft' unobserved entry above\n```\n\n\u003cbr\u003e\n\n#### destroy\n```typescript\nIntersectr.destroy(): void\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetaweb%2Fintersectr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbetaweb%2Fintersectr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetaweb%2Fintersectr/lists"}