{"id":21186552,"url":"https://github.com/tflx/content-observer","last_synced_at":"2025-03-14T20:18:10.515Z","repository":{"id":57206423,"uuid":"257381138","full_name":"tflx/content-observer","owner":"tflx","description":"Watch one or more targets position for when they intersect a defined point in the viewport.","archived":false,"fork":false,"pushed_at":"2020-09-08T13:26:54.000Z","size":589,"stargazers_count":2,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-05T12:18:04.628Z","etag":null,"topics":["content","intersection","intersectionobserver","javascript","menuspy","observer","vanilla","viewport"],"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/tflx.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":"2020-04-20T19:18:38.000Z","updated_at":"2023-04-18T07:42:42.000Z","dependencies_parsed_at":"2022-09-04T03:10:30.912Z","dependency_job_id":null,"html_url":"https://github.com/tflx/content-observer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tflx%2Fcontent-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tflx%2Fcontent-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tflx%2Fcontent-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tflx%2Fcontent-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tflx","download_url":"https://codeload.github.com/tflx/content-observer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243639554,"owners_count":20323511,"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":["content","intersection","intersectionobserver","javascript","menuspy","observer","vanilla","viewport"],"created_at":"2024-11-20T18:24:19.341Z","updated_at":"2025-03-14T20:18:10.491Z","avatar_url":"https://github.com/tflx.png","language":"JavaScript","readme":"# content-observer\n\nWatch one or more targets position for when they intersect a defined point in the viewport. Uses the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)\n\n## Demo\nhttps://tflx.github.io/content-observer\n\n\n\n## Features\n\n- Supports vertical and horizontal scrolling\n- Define a point in pixels or a percentage of the screen height/width\n- Re-calculates on browser resize\n- Update hash-location automatically - requires id on the target(s)\n- Disconnect to stop watching targets\n\n## Installation\n\n\n```html\n\u003cscript src=\"dist/main.js\"\u003e\u003c/script\u003e\n```\n\n`ContentObserver` will be available in the global scope.\n\nOr install via NPM/Yarn and require as a module\n\nInstall using [Yarn](https://yarnpkg.com):\n\n```sh\nyarn add content-observer\n```\n\nor NPM:\n\n```sh\nnpm install content-observer --save\n```\n\n## Usage\n\n```js\nimport ContentObserver from 'content-observer';\n\nclass App {\n  constructor() {\n    const co = new ContentObserver(document.querySelectorAll('.observe'), {\n      callback: this.handleCallback,\n      offset: 200, //or fx. '50%'\n      enableLocationHash: true,\n      direction: 'vertical'\n    });\n  }\n\n  handleCallback(target, inView) {\n    if (inView) document.querySelector('header').innerHTML = target.id.toUpperCase();\n  }\n}\n\nexport default new App;\n```\n**The constructor accepts two arguments: the targets (required)  to watch and an options object.**\n\n\nTo stop watching target(s):\n```js\nco.disconnect()\n```\n\n\n\n\n### Options\n\n\n| Name            | Type               | Default | Required | Description                                                                                                                                                    |\n| --------------- | ------------------ | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **callback**        | function            | null  | false    | The function called when targets intersect/leaves the offset\n| **offsett**        | number\\|string            | 0  | false    | The offset from top/left of viewport. A number indicates pixels from top/left of viewport. A string should be fx.: **'50%'**\n| **enableLocationHash**  | boolean             | false   | false    | Update the location hash when a target with an id intersects the offset                            |\n| **direction**   | string | 'vertical'       | false    | The scroll direction\n\n\n\n### Methods\n\n\n| Name            | Description |\n| --------------- | ----------- |\n| **disconnect**  | Stop watching target(s)\n\n\n\n\n\n\n\n## Intersection Observer\n\n[Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) is the API used to determine if an element intersects the offset or not. [Browser support is really good](http://caniuse.com/#feat=intersectionobserver) - With [Safari adding support in 12.1](https://webkit.org/blog/8718/new-webkit-features-in-safari-12-1/), all major browsers now support Intersection Observers natively. Add the polyfill, so it doesn't break on older versions of iOS and IE11.\n\n### Polyfill\n\nYou can import the [polyfill](https://www.npmjs.com/package/intersection-observer) directly or use a service like [polyfill.io](https://polyfill.io/v2/docs/) to add it when needed.\n\n```sh\nyarn add intersection-observer\n```\n\nThen import it in your app:\n\n```js\nimport 'intersection-observer'\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftflx%2Fcontent-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftflx%2Fcontent-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftflx%2Fcontent-observer/lists"}