{"id":13701400,"url":"https://github.com/heavyy/vue-intersect","last_synced_at":"2025-05-04T21:30:50.962Z","repository":{"id":23934367,"uuid":"100156020","full_name":"heavyy/vue-intersect","owner":"heavyy","description":"A Vue component to add intersection-observer to a Vue component or HTML element.","archived":false,"fork":false,"pushed_at":"2022-08-26T15:46:45.000Z","size":1063,"stargazers_count":321,"open_issues_count":8,"forks_count":32,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-19T21:57:47.675Z","etag":null,"topics":["intersectionobserver","vue","vue-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-intersect","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/heavyy.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":"2017-08-13T05:30:02.000Z","updated_at":"2025-03-18T15:13:50.000Z","dependencies_parsed_at":"2023-01-14T00:06:22.504Z","dependency_job_id":null,"html_url":"https://github.com/heavyy/vue-intersect","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heavyy%2Fvue-intersect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heavyy%2Fvue-intersect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heavyy%2Fvue-intersect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heavyy%2Fvue-intersect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heavyy","download_url":"https://codeload.github.com/heavyy/vue-intersect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252403762,"owners_count":21742434,"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":["intersectionobserver","vue","vue-components"],"created_at":"2024-08-02T20:01:35.465Z","updated_at":"2025-05-04T21:30:50.530Z","avatar_url":"https://github.com/heavyy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI实用程序","Components \u0026 Libraries","UI Utilities","UI Utilities [🔝](#readme)"],"sub_categories":["滚动","UI Utilities","Scroll"],"readme":"# Vue Intersect\n**A Vue component to add intersection-observer to a Vue component or HTML element.**\n\n[![npm version](https://badge.fury.io/js/vue-intersect.svg)](https://badge.fury.io/js/vue-intersect) [![Coverage Status](https://coveralls.io/repos/github/heavyy/vue-intersect/badge.svg)](https://coveralls.io/github/heavyy/vue-intersect) [![Build status](https://img.shields.io/travis/heavyy/vue-intersect.svg)](https://travis-ci.org/heavyy/vue-intersect)\n\n\n\n## Table of content\n\n* [Introduction](#introduction)\n* [Demo](#demo)\n* [Installation](#installation)\n* [Usage](#usage)\n* [Properties](#properties)\n* [Events](#events)\n* [Polyfill](#polyfill)\n\n## Introduction\n\nThe [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) is an amazing API which allows you to observe one or more HTMLElement for when it has entered or left the viewport.\n\nThis API has many use cases like, infinite-scroll, lazy-loading or animations when an element enters the viewport.\n\n\n\n## Demo\n\nWe've made a basic demo of how you might want to use **vue-intersect**. The code is available in the [gh-pages branch](https://github.com/heavyy/vue-intersect/tree/gh-pages) and the part where **vue-intersect** is used [can be found here](https://github.com/heavyy/vue-intersect/blob/gh-pages/src/components/InfiniteScrollItem.vue#L33).\n\n[Hackernews infinite scroll demo](https://heavyy.github.io/vue-intersect/)\n\n\u003e Please keep in mind that the demo is not production code. Use it as an inspiration.\n\n\n\n## Installation\n\nSimply install using your favorite package manager 🔥\n\n\u003e ⚠️ If you're using Vue 3 then install `vue-intersect@next`\n\n#### NPM\n\n```bash\nnpm install vue-intersect --save\n```\n\n#### Yarn\n```bash\nyarn add vue-intersect\n```\n\n\n\n## Usage\n\nThe package acts as an abstract component, much like what you may know from [keep-alive](https://vuejs.org/v2/api/#keep-alive) or [transition](https://vuejs.org/v2/api/#transition).\n\nThis means that it's basically a \"decorator\". A component which does not output any markup to the DOM, but adds the functionality under the hood 😱.\n\n#### .vue\n\n```html\n\u003ctemplate\u003e\n  \u003cintersect @enter=\"msg = 'Intersected'\" @leave=\"msg = 'Not intersected'\"\u003e\n    \u003cdiv\u003e{{ msg }}\u003c/div\u003e\n  \u003c/intersect\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Intersect from 'vue-intersect'\n\n  export default {\n    components: { Intersect },\n    data () {\n      return {\n        msg: 'I will change'\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n\n\n## Properties\n\n| Property   | Type        | Default           | Required | Description                              |\n| ---------- | ----------- | ----------------- | -------- | ---------------------------------------- |\n| threshold  | Array       | [0, 0.2]          | *no*     | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |\n| root       | HTMLElement | null              | *no*     | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |\n| rootMargin | String      | *0px 0px 0px 0px* | *no*     | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |\n\n\n\n## Events\n\n| Name       | Arguments                                | Description                              |\n| ---------- | ---------------------------------------- | ---------------------------------------- |\n| **change** | [*IntersectionObserverEntry*](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) | Event fired on any inte.                 |\n| **enter**  | [*IntersectionObserverEntry*](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) | Event fired when the element is intersected (visible on the screen) |\n| **leave**  | [*IntersectionObserverEntry*](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) | Event fired when the element is *not* intersected (not visible on the screen) |\n| **destroyed** | None | Fired when the underlying element is destroyed |\n\n\n\n\u003e The **enter** and **leave** event is sugar, for an often performed operation. You still have to set the threshold to e.g. [0, 0.2] (default). If you leave out \"0\", it will never call the **leave** event.\n\n\n\nThe events is compliant with Vue's [event modifiers](https://vuejs.org/v2/guide/events.html#Event-Modifiers). This means that you could add `.once` to the events to make sure you only trigger your event handler once.\n\n\n\n## Polyfill\n\nThe IntersectionObserver API is not currently available in all browsers ([IE11, Safari and iOS Safari](http://caniuse.com/#feat=intersectionobserver)). If you intend to support these browsers, you'll need to add a poylfill to your bundle.\n\n[WICG IntersectionObserver Polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) is highly recommended.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheavyy%2Fvue-intersect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheavyy%2Fvue-intersect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheavyy%2Fvue-intersect/lists"}