{"id":24475149,"url":"https://github.com/wpj/dom-peekaboo","last_synced_at":"2025-03-14T15:42:29.793Z","repository":{"id":57214725,"uuid":"294302753","full_name":"wpj/dom-peekaboo","owner":"wpj","description":"Functions for tracking a DOM node's intersection with the viewport","archived":false,"fork":false,"pushed_at":"2020-09-11T16:05:06.000Z","size":73,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-21T12:17:18.231Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/wpj.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-09-10T04:29:37.000Z","updated_at":"2020-09-11T16:05:08.000Z","dependencies_parsed_at":"2022-08-26T13:31:21.075Z","dependency_job_id":null,"html_url":"https://github.com/wpj/dom-peekaboo","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/wpj%2Fdom-peekaboo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpj%2Fdom-peekaboo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpj%2Fdom-peekaboo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpj%2Fdom-peekaboo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wpj","download_url":"https://codeload.github.com/wpj/dom-peekaboo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243602615,"owners_count":20317677,"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":"2025-01-21T09:13:46.420Z","updated_at":"2025-03-14T15:42:29.761Z","avatar_url":"https://github.com/wpj.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dom-peekaboo\n\n[![CI Status](https://github.com/wpj/dom-peekaboo/workflows/CI/badge.svg)](https://github.com/wpj/dom-peekaboo/actions)\n\nFunctions for tracking a DOM node's intersection with the viewport.\n\n## Installation\n\n```\nnpm install dom-peekaboo\n```\n\n## Usage\n\n```js\nimport { peekaboo } from 'dom-peekaboo';\n\nfunction onChange(isIntersecting) {\n  console.log(\n    `Element is ${isIntersecting ? 'visible' : 'not visible'} in the viewport`,\n  );\n}\n\npeekaboo(document.getElementById('test'), onChange);\n```\n\n## API\n\n### Parameters\n\nAll functions accept the same set of parameters with the following type:\n\n```typescript\n(\n  element: HTMLElement,\n  onChange: (isIntersecting: boolean) =\u003e void,\n  options?: Options,\n) =\u003e () =\u003e void;\n```\n\nThe following options are available:\n\n- `offsetBottom?: number`: Number of pixels to add to the bottom of the area\n  checked against when computing element intersection. (default: `0`)\n\n- `offsetLeft?: number`: Number of pixels to add to the left of the area checked\n  against when computing element intersection. (default: `0`)\n\n- `offsetRight?: number`: Number of pixels to add to the right of the area\n  checked against when computing element intersection. (default: `0`)\n\n- `offsetTop?: number`: Number of pixels to add to the top of the area checked\n  against when computing element intersection. (default: `0`)\n\n- `throttle?: number`: Number of ms to throttle scroll events (only applies in\n  environments that don't support IntersectionObserver or when using\n  `useScrollIntersection`/`useScrollIntersectionChangeCallback`). (default:\n  `100`)\n\n### Exports\n\n- `io`: Uses an IntersectionObserver to trigger `onChange` when `element` enters\n  or exits the viewport.\n\n- `scroll`: Uses a scroll event listener, `getBoundingClientRect`, and\n  ResizeObserver to trigger `onChange` when `element` enters or exits the\n  viewport.\n\n- `peekaboo`: Uses `io` to trigger `onChange` in browsers that support\n  IntersectionObserver and falls back to using `scroll` in browsers that don't.\n\n## Caveats\n\n- This module considers edge-adjacent intersections (when the target element is\n  directly above/below/beside the viewport) to be in viewport. If you only want\n  to consider elements with pixels in the viewport as visible, you can configure\n  `offsetBottom`/`offsetLeft`/`offsetRight`/`offsetTop` to be `-1`.\n- IntersectionObserver ignores `rootMargin` in iframe contexts, which means that\n  offsets will be ignored.\n  - https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-rootmargin\n  - https://developers.google.com/web/updates/2016/04/intersectionobserver#iframe_magic\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpj%2Fdom-peekaboo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwpj%2Fdom-peekaboo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpj%2Fdom-peekaboo/lists"}