{"id":18054584,"url":"https://github.com/gpoitch/viewprt","last_synced_at":"2026-03-05T20:04:35.658Z","repository":{"id":52223960,"uuid":"53812641","full_name":"gpoitch/viewprt","owner":"gpoitch","description":"A tiny, dependency-free, high performance viewport position \u0026 intersection observation tool","archived":false,"fork":false,"pushed_at":"2021-05-06T07:10:40.000Z","size":313,"stargazers_count":42,"open_issues_count":3,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T20:02:01.952Z","etag":null,"topics":["in-view","infinite-scroll","lazy-loading","scrolling","viewport"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gpoitch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-13T23:09:53.000Z","updated_at":"2025-03-04T09:38:10.000Z","dependencies_parsed_at":"2022-09-11T07:24:14.088Z","dependency_job_id":null,"html_url":"https://github.com/gpoitch/viewprt","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gpoitch%2Fviewprt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gpoitch%2Fviewprt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gpoitch%2Fviewprt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gpoitch%2Fviewprt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gpoitch","download_url":"https://codeload.github.com/gpoitch/viewprt/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248017898,"owners_count":21034042,"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":["in-view","infinite-scroll","lazy-loading","scrolling","viewport"],"created_at":"2024-10-31T00:11:52.691Z","updated_at":"2026-03-05T20:04:30.632Z","avatar_url":"https://github.com/gpoitch.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# viewprt [![Build Status](https://travis-ci.org/gpoitch/viewprt.svg)](https://travis-ci.org/gpoitch/viewprt)\n\nA tiny, dependency-free, high performance viewport position \u0026 intersection observation tool. You can watch when elements enter \u0026 exit a viewport, or when a viewport itself reaches its bounds. Use this as a building block for lazy loaders, infinite scrolling, etc.\n\n### [Demo / Examples 🕹](https://rawgit.com/gpoitch/viewprt/master/demos/index.html)\n\n### Install\n\n```\nnpm i viewprt -S\n```\n\n### Usage \u0026 API\n\n\u003c!-- prettier-ignore-start --\u003e\n```js\nimport {\n  ElementObserver,   // Use this to observe when an element enters and exits the viewport\n  PositionObserver   // Use this to observe when a viewport reaches its bounds\n  ObserverCollection // Advanced: Used for grouping custom viewport handling\n} from 'viewprt'\n\n// All options are optional. The defaults are shown below.\n\n// ElementObserver(element, options)\nconst elementObserver = ElementObserver(document.getElementById('element'), {\n  onEnter(element, viewport) {},               // callback when the element enters the viewport\n  onExit(element, viewport) {},                // callback when the element exits the viewport\n  offset: 0,                                   // offset from all edges of the viewport in pixels\n  offsetX: 0,                                  // offset from the left and right edges of the viewport in pixels\n  offsetY: 0,                                  // offset from the top and bottom edges of the viewport in pixels\n  once: false,                                 // if true, observer is detroyed after first callback is triggered\n  observerCollection: new ObserverCollection() // Advanced: Used for grouping custom viewport handling\n})\n\n// PositionObserver(options)\nconst positionObserver = PositionObserver({\n  onBottom(container, viewport) {},            // callback when the viewport reaches the bottom\n  onTop(container, viewport) {},               // callback when the viewport reaches the top\n  onLeft(container, viewport) {},              // callback when the viewport reaches the left\n  onRight(container, viewport) {},             // callback when the viewport reaches the right\n  onFit(container, viewport) {},               // callback when the viewport contents fit within the container without having to scroll\n  container: document.body,                    // the viewport element to observe the position of\n  offset: 0,                                   // offset from all edges of the viewport in pixels\n  offsetX: 0,                                  // offset from the left and right edges of the viewport in pixels\n  offsetY: 0,                                  // offset from the top and bottom edges of the viewport in pixels\n  once: false,                                 // if true, observer is detroyed after first callback is triggered\n  observerCollection: new ObserverCollection() // Advanced: Used for grouping custom viewport handling\n})\n```\n\u003c!-- prettier-ignore-end --\u003e\n\nThe `viewport` argument in callbacks is an object containing the current state of the viewport e.g.:\n\n```js\n{\n  width: 1024,\n  height: 768,\n  positionX: 0,\n  positionY: 2000,\n  directionY: \"down\",\n  directionX: \"none\"\n}\n```\n\n```js\n// Stop observing:\npositionObserver.destroy()\nelementObserver.destroy() // This happens automatically if the element is removed from the DOM\n\n// Start observing again:\npositionObserver.activate()\nelementObserver.activate()\n```\n\n#### Advanced: Using a custom observer collection\n\nIf you need to control scroll and resize events (e.g. for custom throttling/debouncing), you can create a new instance of `ObserverCollection`.\n\n```js\nconst debouncedObserverCollection = new ObserverCollection({ handleScrollResize: (h) =\u003e debounce(h, 300) })\n\nconst elementObserver = ElementObserver(document.getElementById('element1'), {\n  observerCollection: debouncedObserverCollection\n})\n\n// The same instance of ObserverCollection should be reused to have only one scroll and resize event\nconst elementObserver = ElementObserver(document.getElementById('element2'), {\n  observerCollection: debouncedObserverCollection\n})\n```\n\n### Browser support\n\nChrome, Firefox, Edge, IE 11+, Safari 8+  \n(requestAnimationFrame, MutationObserver, Map)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgpoitch%2Fviewprt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgpoitch%2Fviewprt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgpoitch%2Fviewprt/lists"}