{"id":17060891,"url":"https://github.com/que-etc/intersection-observer-polyfill","last_synced_at":"2025-07-07T18:39:29.066Z","repository":{"id":42950303,"uuid":"62647964","full_name":"que-etc/intersection-observer-polyfill","owner":"que-etc","description":"A polyfill of IntersectionObserver API","archived":false,"fork":false,"pushed_at":"2020-12-14T01:22:31.000Z","size":73,"stargazers_count":34,"open_issues_count":6,"forks_count":15,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-12T18:14:08.548Z","etag":null,"topics":[],"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/que-etc.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":"2016-07-05T15:26:24.000Z","updated_at":"2023-11-09T05:24:38.000Z","dependencies_parsed_at":"2022-08-31T00:01:46.932Z","dependency_job_id":null,"html_url":"https://github.com/que-etc/intersection-observer-polyfill","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/que-etc%2Fintersection-observer-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/que-etc%2Fintersection-observer-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/que-etc%2Fintersection-observer-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/que-etc%2Fintersection-observer-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/que-etc","download_url":"https://codeload.github.com/que-etc/intersection-observer-polyfill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248610336,"owners_count":21132920,"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-10-14T10:45:29.254Z","updated_at":"2025-04-12T18:14:17.311Z","avatar_url":"https://github.com/que-etc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"IntersectionObserver Polyfill\n=============\n\nA polyfill of IntersectionObserver API.\n\nImplements event based tracking of changes in elements position. Uses MutationsObserver and falls back to an infinite dirty checking cycle if the first one is not supported. Handles long running CSS transitions/animations, attributes and nodes mutations along with changes made by :hover pseudo-class (optional).\n\nWritten in ES6 and compliant with the [spec](http://rawgit.com/WICG/IntersectionObserver/master/index.html) and native implementation. Doesn't contain any publicly available methods or properties except for those described in spec. Size is 4kb when minified and gzipped.\n\n[Live demo](http://que-etc.github.io/intersection-observer-polyfill) (won't run in IE9).\n\n## Installation\n\nFrom NPM:\n\n```sh\nnpm install --save intersection-observer-polyfill\n```\n\nFrom Bower:\n\n```sh\nbower install --save intersection-observer-polyfill\n```\n\nOr just grab one of the pre-built versions from [`dist`](https://github.com/que-etc/intersection-observer-polyfill/tree/master/dist).\n\n## Browser Support\n\nPolyfill has been tested and known to work in the following browsers:\n\n* Firefox 31+\n* Edge 13+\n* Internet Explorer 11\n* Internet Explorer 9-10 (tested in compatibility mode of IE11)\n* Chrome 40+ (native support since 51)\n* Opera 30+ (native support since 38)\n* Safari was not tested but expected to work\n\n## Usage Examples\n\nIf you are using ES6 modules with bundlers like [Webpack](https://webpack.github.io/) or [JSPM](http://jspm.io/):\n\n```javascript\nimport IntersectionObserver from 'intersection-observer-polyfill';\n\nconst observer = new IntersectionObserver((entries, observer) =\u003e {}, {\n    rootMargin: '100px 0px',\n    threshold: [0, 0.1, 0.2, 0.5, 1]\n});\n\n// ...\n```\n\nAlternatively you can take a pre-built UMD version.\n\nWith AMD:\n\n```javascript\ndefine([\n    'intersection-observer-polyfill/dist/IntersectionObserver'\n], function (IntersectionObserver) {\n    // ...\n});\n```\n\nWith CommonJS:\n\n```javascript\nvar IntersectionObserver = require('intersection-observer-polyfill/dist/IntersectionObserver');\n```\n\nAs browsers' global:\n\n```xml\n\u003cscript src=\"intersection-observer-polyfill/dist/IntersectionObserver.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    (function () {\n        var observer = new IntersectionObserver(function () {});\n    })();\n\u003c/script\u003e\n```\n### Global exports\n\nOptionally you can take a version that always exports itself globally.\n\nWith ES6 modules:\n\n```javascript\nimport 'intersecton-observer-polyfill/index.global';\n\nconst observer = new IntersectionObserver(() =\u003e {});\n```\n\nWith AMD/CommonJS:\n\n```javascript\nrequire('intersecton-observer-polyfill/dist/IntersectionObserver.global');\n```\n\n## Configuration\n\n`IntersectionObserver` class additionally implements following static accessor properties:\n\n### idleTimeot\n\nWhen DOM elements change theirs attributes like `class` or `style` an update cycle\nwill be initiated. This cycle is used to catch possible CSS transitions/animations and the `idleTimeout` tells for how long we need run it if it doesn't detect any changes in elements position.\n\nDefault value is `50` milliseconds and you can increase it to match the delay of transitions, e.g. if transition starts after `500` milliseconds then you can set `idleTimeout` to the corresponding value: `IntersectionObserver.idleTimeout = 500;`. If you don't plan to use transitions then you can set this value to `0`. Otherwise it's safer to leave the default value, even if transition starts immediately.\n\n### trackHovers\n\nBy default possible changes in position of elements caused by CSS `:hover` class are not tracked. You can set `IntersectionObserver.trackHovers = true` if you need them to be supported.\n\n**NOTE:** Changes made to these properties will affect all instances of IntersectionObserver, even those that were already created.\n\n## Acknowledgments\n\nI'm very grateful to [Philip Walton](https://github.com/philipwalton) for the test suites of observe/unobserve methods that I took from his [implementation](https://github.com/WICG/IntersectionObserver/pull/135).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fque-etc%2Fintersection-observer-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fque-etc%2Fintersection-observer-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fque-etc%2Fintersection-observer-polyfill/lists"}