{"id":16601776,"url":"https://github.com/biyuqi/vue-intersection-observer","last_synced_at":"2025-03-16T21:30:46.803Z","repository":{"id":33857875,"uuid":"162540306","full_name":"BiYuqi/vue-intersection-observer","owner":"BiYuqi","description":"Vue component for the Intersection \u003cObserver /\u003e API","archived":false,"fork":false,"pushed_at":"2023-03-05T07:34:38.000Z","size":1631,"stargazers_count":35,"open_issues_count":23,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-21T19:02:37.310Z","etag":null,"topics":["intersection-observer","intersectionobserver","intersectionobserver-api","vue-component","vue-intersection-observer","vue2"],"latest_commit_sha":null,"homepage":"https://biyuqi.github.io/vue-intersection-observer","language":"Vue","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/BiYuqi.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-20T07:05:30.000Z","updated_at":"2025-02-16T19:07:32.000Z","dependencies_parsed_at":"2024-06-18T19:51:24.597Z","dependency_job_id":"3b29ac17-e2cc-4230-a315-120237a4eef0","html_url":"https://github.com/BiYuqi/vue-intersection-observer","commit_stats":{"total_commits":29,"total_committers":3,"mean_commits":9.666666666666666,"dds":0.3793103448275862,"last_synced_commit":"d418978fcc2ace62cbd002433ea20c4688342c96"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BiYuqi%2Fvue-intersection-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BiYuqi%2Fvue-intersection-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BiYuqi%2Fvue-intersection-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BiYuqi%2Fvue-intersection-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BiYuqi","download_url":"https://codeload.github.com/BiYuqi/vue-intersection-observer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243830939,"owners_count":20354853,"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":["intersection-observer","intersectionobserver","intersectionobserver-api","vue-component","vue-intersection-observer","vue2"],"created_at":"2024-10-12T00:19:16.084Z","updated_at":"2025-03-16T21:30:46.519Z","avatar_url":"https://github.com/BiYuqi.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [vue-intersection-observer](https://github.com/BiYuqi/vue-intersection-observer)\n\n[简体中文](https://github.com/BiYuqi/vue-intersection-observer/blob/master/README.zh-CN.md) | English\n\n## Preface\nThe **Vue Intersection Observer** is a Vue component based on the [IntersectionObserver API](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API) integration, the packaging facilitates the implementation of information that needs to be used for element intersection changes.\n\nFor example.\n* Implementation of the lazy loading of images when the page is scrolled.\n* Implementation of 'infinitely scrollable' websites, i.e. more content is loaded directly when the user scrolls the page, without turning the page.\n* Detection of the exposure of its advertising elements for the purpose of calculating advertising revenue.\n* Flexibility to start tasks or animations depending on whether the user has scrolled to the appropriate area or not.\n\n## Usage\n\n```js\nnpm i vue-intersection-observer -S\n```\n\nUse in Lazy-load-image:\n\n[Demo](https://biyuqi.github.io/vue-intersection-observer/#/lazy-load)\n\n```js\n// Wrapping the LazyImage component based on this plug-in\n\u003ctemplate\u003e\n  \u003cobserver @on-change=\"onChange\" class=\"test-lazy\"\u003e\n    \u003cimg height=\"200\" style=\"max-width: 100%\" :src=\"currentInfo\" alt=\"\"\u003e\n  \u003c/observer\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Observer from 'vue-intersection-observer'\nexport default {\n  data() {\n    return{\n      currentInfo: false\n    }\n  },\n  props: {\n    imageSrc: {\n      type: [String, Number]\n    }\n  },\n  components: {\n    Observer\n  },\n  methods: {\n    onChange(entry, unobserve) {\n      // After loading Cancel monitoring, optimise performance\n      if (entry.isIntersecting) {\n        unobserve()\n      }\n      this.currentInfo = entry.isIntersecting ? this.imageSrc : 'https://avatars2.githubusercontent.com/u/20992106?s=460\u0026v=4'\n    }\n  }\n}\n```\nPractical lazy loading.\n\n```js\n\u003ctemplate\u003e\n  \u003cdiv class=\"w800\"\u003e\n    \u003cdiv class=\"header\"\u003eImage lazy loading test\u003ci class=\"tips\"\u003ePlease scroll down the screen quickly to test lazy loading\u003c/i\u003e\u003c/div\u003e.\n    \u003cdiv class=\"content\"\u003e\u003c/div\u003e\n    \u003cdiv v-for=\"item in imgList\" :key=\"item\" class=\"img-box-mock\"\u003e\n      \u003cLazyImage :imageSrc=\"item\"\u003e\u003c/LazyImage\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport LazyImage from './LazyImage'\nexport default {\n  data() {\n    return {\n      imgList: []\n    }\n  },\n  components: {\n    LazyImage\n  }\n}\n\u003c/script\u003e\n```\n\nUse in normal scenarios (Usage in normal):\n\n```js\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"left w800\"\u003e\n      \u003cdiv class=\"header w800\" :class=\"{active: visible}\"\u003e\n        Detects when an element is displayed hidden from the screen area {{visible ? 'visible' : 'unvisible'}}}\n      \u003c/div\u003e\n      \u003cdiv class=\"content\"\u003e\n        Please Scroll Page Down and Up To Test\n      \u003c/div\u003e\n      \u003cobserver @on-change=\"onChange\"\u003e\n        \u003cdiv class=\"test\" :class=\"{active: visible}\"\u003eAt last\u003c/div\u003e.\n      \u003c/observer\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Observer from 'vue-intersection-observer'\nexport default {\n  data() {\n    return{\n      visible: false\n    }\n  },\n  components: {\n    Observer\n  },\n  methods: {\n    onChange(entry, obv) {\n      this.visible = entry.isIntersecting\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nOptionally add the polyfill and make sure it's required on your dependendencies for unsupporting browsers:\n\n```js\nnpm install --save intersection-observer\n```\n\n## What does IntersectionObserver do?\n\n![](http://loadingmore-1254319003.coscd.myqcloud.com/observe.png)\n\n## Why use this component?\n\nThe purpose of this component is to provide the simplest solution for observing the elements that enter the viewport on the Vue codebase. It is completely declarative, all complexity is abstracted away, and the focus is on reusability and low memory consumption.\n\n## Documentation\n\n[DEMO](https://biyuqi.github.io/vue-intersection-observer)\n\n## Options And Method# [vue-intersection-observer](https://github.com/BiYuqi/vue-intersection-observer)\n                     \n                     [简体中文](https://github.com/BiYuqi/vue-intersection-observer/blob/master/README.zh-CN.md) | English\n                     \n                     ## Preface\n                     The **Vue Intersection Observer** is a Vue component based on the [IntersectionObserver API](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API) integration, the packaging facilitates the implementation of information that needs to be used for element intersection changes.\n                     \n                     For example.\n                     * Implementation of the lazy loading of images when the page is scrolled.\n                     * Implementation of 'infinitely scrollable' websites, i.e. more content is loaded directly when the user scrolls the page, without turning the page.\n                     * Detection of the exposure of its advertising elements for the purpose of calculating advertising revenue.\n                     * Flexibility to start tasks or animations depending on whether the user has scrolled to the appropriate area or not.\n                     \n                     ## Usage\n                     \n                     ```js\n                     npm i vue-intersection-observer -S\n                     ```\n                     \n                     Use in Lazy-load-image:\n                     \n                     [Demo](https://biyuqi.github.io/vue-intersection-observer/#/lazy-load)\n                     \n                     ```js\n                     // Wrapping the LazyImage component based on this plug-in\n                     \u003ctemplate\u003e\n                       \u003cobserver @on-change=\"onChange\" class=\"test-lazy\"\u003e\n                         \u003cimg height=\"200\" style=\"max-width: 100%\" :src=\"currentInfo\" alt=\"\"\u003e\n                       \u003c/observer\u003e\n                     \u003c/template\u003e\n                     \n                     \u003cscript\u003e\n                     import Observer from 'vue-intersection-observer'\n                     export default {\n                       data() {\n                         return{\n                           currentInfo: false\n                         }\n                       },\n                       props: {\n                         imageSrc: {\n                           type: [String, Number]\n                         }\n                       },\n                       components: {\n                         Observer\n                       },\n                       methods: {\n                         onChange(entry, unobserve) {\n                           // After loading Cancel monitoring, optimise performance\n                           if (entry.isIntersecting) {\n                             unobserve()\n                           }\n                           this.currentInfo = entry.isIntersecting ? this.imageSrc : 'https://avatars2.githubusercontent.com/u/20992106?s=460\u0026v=4'\n                         }\n                       }\n                     }\n                     ```\n                     Practical lazy loading.\n                     \n                     ```js\n                     \u003ctemplate\u003e\n                       \u003cdiv class=\"w800\"\u003e\n                         \u003cdiv class=\"header\"\u003eImage lazy loading test\u003ci class=\"tips\"\u003ePlease scroll down the screen quickly to test lazy loading\u003c/i\u003e\u003c/div\u003e.\n                         \u003cdiv class=\"content\"\u003e\u003c/div\u003e\n                         \u003cdiv v-for=\"item in imgList\" :key=\"item\" class=\"img-box-mock\"\u003e\n                           \u003cLazyImage :imageSrc=\"item\"\u003e\u003c/LazyImage\u003e\n                         \u003c/div\u003e\n                       \u003c/div\u003e\n                     \u003c/template\u003e\n                     \n                     \u003cscript\u003e\n                     import LazyImage from './LazyImage'\n                     export default {\n                       data() {\n                         return {\n                           imgList: []\n                         }\n                       },\n                       components: {\n                         LazyImage\n                       }\n                     }\n                     \u003c/script\u003e\n                     ```\n                     \n                     Use in normal scenarios (Usage in normal):\n                     \n                     ```js\n                     \u003ctemplate\u003e\n                       \u003cdiv\u003e\n                         \u003cdiv class=\"left w800\"\u003e\n                           \u003cdiv class=\"header w800\" :class=\"{active: visible}\"\u003e\n                             Detects when an element is displayed hidden from the screen area {{visible ? 'visible' : 'unvisible'}}}\n                           \u003c/div\u003e\n                           \u003cdiv class=\"content\"\u003e\n                             Please Scroll Page Down and Up To Test\n                           \u003c/div\u003e\n                           \u003cobserver @on-change=\"onChange\"\u003e\n                             \u003cdiv class=\"test\" :class=\"{active: visible}\"\u003eAt last\u003c/div\u003e.\n                           \u003c/observer\u003e\n                         \u003c/div\u003e\n                       \u003c/div\u003e\n                     \u003c/template\u003e\n                     \n                     \u003cscript\u003e\n                     import Observer from 'vue-intersection-observer'\n                     export default {\n                       data() {\n                         return{\n                           visible: false\n                         }\n                       },\n                       components: {\n                         Observer\n                       },\n                       methods: {\n                         onChange(entry, obv) {\n                           this.visible = entry.isIntersecting\n                         }\n                       }\n                     }\n                     \u003c/script\u003e\n                     ```\n                     \n                     Optionally add the polyfill and make sure it's required on your dependendencies for unsupporting browsers:\n                     \n                     ```js\n                     npm install --save intersection-observer\n                     ```\n                     \n                     ## What does IntersectionObserver do?\n                     \n                     ![](http://loadingmore-1254319003.coscd.myqcloud.com/observe.png)\n                     \n                     ## Why use this component?\n                     \n                     The purpose of this component is to provide the simplest solution for observing the elements that enter the viewport on the Vue codebase. It is completely declarative, all complexity is abstracted away, and the focus is on reusability and low memory consumption.\n                     \n                     ## Documentation\n                     \n                     [DEMO](https://biyuqi.github.io/vue-intersection-observer)\n                     \n                     ## Options And Method\n                     Name | Type | Default | Required | Description \n                     --------- | --------- | --------- | --------- | ---------\n                     root | HTMLElement | false | default browser viewport is used as root if root is specified as null or unspecified.\n                     rootMargin | String | \nName | Type | Default | Required | Description \n--------- | --------- | --------- | --------- | ---------\nroot | HTMLElement | false | default browser viewport is used as root if root is specified as null or unspecified.\nrootMargin | String | '0px' | false | defines the margin of the root element, which is used to expand or reduce the size of the rootBounds rectangle and thus affects the size of the intersection area of the intersectionRect. It uses CSS definitions such as 10px 20px 30px 40px to represent the values of top, right, bottom and left.\nthreshold | Number or Array\\\u003cnumber\u003e | 0 | false | The threshold property determines when the callback function is triggered. It is an array where each member is a threshold value, which defaults to [0], i.e. when the intersectionRatio reaches 0, the callback function is triggered.\non-change | Function | required | (entry, unobserve) =\u003e {}\n\n## Method Detail Callback params\n```js\n\u003cobserver @on-change=\"onChange\" class=\"test-lazy\"\u003e\n  \u003cimg height=\"200\" style=\"max-width: 100%\" :src=\"currentInfo\" alt=\"\"\u003e\n\u003c/observer\u003e\n\nonChange(entry, unobserve) {\n  // entry: \n  // time: the time at which the change in visibility occurred, a high-precision time stamp in milliseconds\n\n  // target: the target element to be observed, which is a DOM node object\n\n  // rootBounds: information about the rectangular area of the root element.\n\n  // Return value of the getBoundingClientRect() method, or null if there is no root element (i.e. scrolling directly relative to the viewport).\n\n  // boundingClientRect: Information about the rectangular area of the target element.\n\n  // intersectionRect: Information about the intersection area of the target element with the viewport (or root element)\n  // isIntersecting: boolean returns whether the current element is displayed in the visible area (important, most scenarios are based on this field)\n\n  // intersectionRatio: the visible ratio of the target element, i.e. the ratio of the intersectionRect to the bindingClientRect, 1 if fully visible, less than or equal to 0 if not visible at all\n  // unobserve\n  // The method can remove target describe\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiyuqi%2Fvue-intersection-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiyuqi%2Fvue-intersection-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiyuqi%2Fvue-intersection-observer/lists"}