{"id":13938038,"url":"https://github.com/scaccogatto/vue-waypoint","last_synced_at":"2025-04-08T11:15:02.761Z","repository":{"id":37579884,"uuid":"75716082","full_name":"scaccogatto/vue-waypoint","owner":"scaccogatto","description":"trigger functions and events based on the element position on the screen","archived":false,"fork":false,"pushed_at":"2023-08-28T15:55:42.000Z","size":1429,"stargazers_count":470,"open_issues_count":6,"forks_count":38,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-01T10:08:17.238Z","etag":null,"topics":["intersectionobserver","triggers","vue","vue3"],"latest_commit_sha":null,"homepage":"","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/scaccogatto.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2016-12-06T09:30:38.000Z","updated_at":"2024-08-06T14:43:37.000Z","dependencies_parsed_at":"2024-01-08T08:55:09.383Z","dependency_job_id":null,"html_url":"https://github.com/scaccogatto/vue-waypoint","commit_stats":{"total_commits":102,"total_committers":16,"mean_commits":6.375,"dds":0.4411764705882353,"last_synced_commit":"6a602ce0fe47ae6787fe4a62c56b9a70e7f727ca"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scaccogatto%2Fvue-waypoint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scaccogatto%2Fvue-waypoint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scaccogatto%2Fvue-waypoint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scaccogatto%2Fvue-waypoint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scaccogatto","download_url":"https://codeload.github.com/scaccogatto/vue-waypoint/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247829512,"owners_count":21002997,"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","triggers","vue","vue3"],"created_at":"2024-08-07T23:04:11.344Z","updated_at":"2025-04-08T11:15:02.737Z","avatar_url":"https://github.com/scaccogatto.png","language":"TypeScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Vue","UI实用程序","Components \u0026 Libraries","UI Utilities","UI Utilities [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","事件处理","UI Utilities","Event Handling"],"readme":"# VueWaypoint\n\n\u003e trigger functions and events based on the element position on the screen\n\n![Latest Release](https://github.com/scaccogatto/vue-waypoint/workflows/Release/badge.svg)\n\n## Demo\n\n[Simple demo page](https://vue-waypoint.netlify.app/)\n\nOpen your browser console and see what's going on while scrolling up and down\n\n## Features\n\n- [x] Vue 3\n- [x] No dependencies\n- [x] Flexible\n- [x] Typescript\n- [x] Battle tested\n- [x] Customizable\n- [x] Solid project (5+ years)\n- [x] Supports slots\n\n## Getting started\n\n### npm\n\n```bash\nnpm i vue-waypoint\n```\n\n### Vue component\n\n```html\n\u003ctemplate\u003e\n  \u003cWaypoint @change=\"onChange\"\u003e\n    \u003c!-- anything you want here --\u003e\n  \u003c/Waypoint\u003e\n\u003c/template\u003e\n```\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import { defineComponent } from \"vue\";\n  import { Waypoint } from \"vue-waypoint\";\n\n  export default defineComponent({\n    name: \"SomeComponent\",\n    components: {\n      Waypoint,\n    },\n    setup() {\n      const onChange = (waypointState) =\u003e {\n        // Going can be:\n        // IN\n        // OUT\n        console.log(waypointState.going);\n\n        // Direction can be:\n        // UP\n        // DOWN\n        // LEFT\n        // RIGHT\n        console.log(waypointState.direction);\n      };\n\n      return { onChange };\n    },\n  });\n\u003c/script\u003e\n```\n\n## Props\n\n### `active`\n\n- [x] Can use a reactive variable\n- [x] Can set `true`/`false` dynamically\n\nUsage:\n\n- Enable the waypoint: `\u003cWaypoint :active=\"true\" /\u003e`\n- Disable the waypoint: `\u003cWaypoint :active=\"false\" /\u003e`\n\n### `options`\n\n- [x] Useful for inner div detection\n- [x] Trigger `change` event a portion of the element is completely on screen\n- [x] Is an [official IntersectionObserverInit implementation](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)\n\nUsage:\n\n- Set a custom `IntersectionObserver` options: `\u003cWaypoint :options=\"options\" /\u003e`\n- Read what you can do with `options`: [IntersectionObserverInit docs](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)\n\nOptions example:\n\n```js\nconst options: IntersectionObserverInit = {\n  root: document,\n  rootMargin: \"0px 0px 0px 0px\",\n  threshold: [0.25, 0.75],\n};\n```\n\n### `tag`\n\n- [x] Set your preferred tag for the element\n- [x] Defaults to `div`\n\n- Waypoint as div: `\u003cWaypoint :tag=\"'div'\" /\u003e --\u003e renders --\u003e \u003cdiv class=\"waypoint\"\u003e\u003c/div\u003e`\n- Waypoint as span: `\u003cWaypoint :tag=\"'span'\" /\u003e --\u003e renders --\u003e \u003cspan class=\"waypoint\"\u003e\u003c/span\u003e`\n- Waypoint as p: `\u003cWaypoint :tag=\"'p'\" /\u003e --\u003e renders --\u003e \u003cp class=\"waypoint\"\u003e\u003c/p\u003e`\n\n### `disableCssHelpers`\n\n- [x] Disable automatic CSS classes on the Waypoint component\n- [x] Defaults to `false`\n\nUsage:\n\n- Enable helpers (default): `\u003cWaypoint :disableCssHelpers=\"false\" /\u003e`\n- Disable helpers: `\u003cWaypoint :disableCssHelpers=\"true\" /\u003e`\n\nDOM result:\n\n- With CSS helpers: `\u003cWaypoint /\u003e --\u003e renders --\u003e \u003cdiv class=\"waypoint going-in direction-down\"\u003e\u003c/div\u003e`\n- Without CSS helpers: `\u003cWaypoint :disableCssHelpers=\"true\" /\u003e --\u003e renders --\u003e \u003cdiv\u003e\u003c/div\u003e`\n\n## CSS helpers\n\n- [x] Zero configuration needed\n- [x] Useful for simple CSS animations\n\nThe component comes with three classes:\n\n- `waypoint`: set when the waypoint is ready\n- `going-in`, `going-out`: dynamically changed when the waypoint comes in and out\n- `direction-up`, `direction-down`, `direction-left`, `direction-right`: dynamically changed when the direction changes\n\nExamples:\n\n- `\u003cWaypoint class=\"waypoint going-in direction-up\" /\u003e` - the element is visible and came from bottom and is going top (natural scroll)\n- `\u003cWaypoint class=\"waypoint going-in direction-down\" /\u003e` - the element is visible and came from top and is going up (reverse natural scroll)\n- `\u003cWaypoint class=\"waypoint going-out direction-up\" /\u003e` - the element is not visible and came from bottom and is going top\n- `\u003cWaypoint class=\"waypoint going-out direction-down\" /\u003e` - the element is not visible and came from top and is going up\n\n## Events\n\n### `change`\n\nEmitted every time the waypoint detects a change.\n\n```html\n\u003ctemplate\u003e\n  \u003cWaypoint @change=\"onChange\" /\u003e\n\u003c/template\u003e\n```\n\n```js\nfunction onChange(waypointState) {\n  /* ... */\n}\n```\n\n```js\ninterface WaypointState {\n  el: Element;\n  going: \"IN\" | \"OUT\";\n  direction: \"UP\" | \"DOWN\" | \"LEFT\" | \"RIGHT\";\n}\n```\n\n## Development\n\n1. Fork the repository\n2. Run the project (`npm i \u0026\u0026 npm run dev`)\n3. Follow [Conventional Commits spec](https://www.conventionalcommits.org/en/v1.0.0/) for your commits\n4. Open a pull request\n\n## LEGACY: Vue2 and Nuxt version\n\n[vue-waypoint for Vue2 repository](https://github.com/scaccogatto/vue-waypoint/tree/vue2)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscaccogatto%2Fvue-waypoint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscaccogatto%2Fvue-waypoint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscaccogatto%2Fvue-waypoint/lists"}