{"id":18974297,"url":"https://github.com/alexandrebonaventure/vue-scrollmonitor","last_synced_at":"2025-04-19T16:39:37.841Z","repository":{"id":66237416,"uuid":"102536149","full_name":"AlexandreBonaventure/vue-scrollmonitor","owner":"AlexandreBonaventure","description":"Wrapper to use the awesome scrollMonitor with Vue@2.4.x","archived":false,"fork":false,"pushed_at":"2019-02-08T22:50:16.000Z","size":234,"stargazers_count":43,"open_issues_count":8,"forks_count":8,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-04-06T13:41:46.413Z","etag":null,"topics":["fixed","scroll","viewport","vuejs2"],"latest_commit_sha":null,"homepage":null,"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/AlexandreBonaventure.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-09-05T22:35:39.000Z","updated_at":"2022-09-27T08:43:53.000Z","dependencies_parsed_at":"2023-02-20T16:31:20.454Z","dependency_job_id":null,"html_url":"https://github.com/AlexandreBonaventure/vue-scrollmonitor","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexandreBonaventure%2Fvue-scrollmonitor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexandreBonaventure%2Fvue-scrollmonitor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexandreBonaventure%2Fvue-scrollmonitor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexandreBonaventure%2Fvue-scrollmonitor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlexandreBonaventure","download_url":"https://codeload.github.com/AlexandreBonaventure/vue-scrollmonitor/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249223935,"owners_count":21232833,"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":["fixed","scroll","viewport","vuejs2"],"created_at":"2024-11-08T15:14:36.179Z","updated_at":"2025-04-16T09:33:55.768Z","avatar_url":"https://github.com/AlexandreBonaventure.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VueScrollmonitor\n\u003e Handle scroll events like a boss\n\nWrapper to use the awesome scrollMonitor with Vue@2.4.x\n\nTo know more : [https://github.com/stutrek/scrollMonitor](https://github.com/stutrek/scrollMonitor)\n\n\n### Demos\n[Simple example](https://htmlpreview.github.io/?https://raw.githubusercontent.com/AlexandreBonaventure/vue-scrollmonitor/dev/examples/dist/simple/index.html)\nsee source : [here](https://github.com/AlexandreBonaventure/vue-scrollmonitor/tree/dev/examples/src/simple)\n\n### Installation\n```\nnpm install vue-scrollmonitor\n\n// or\n\nyarn add vue-scrollmonitor\n```\n\n### Usage\nVueScrollMonitor relies on two components. So in order to use it, you have two choices:\n#### Use the plugin\nIt will register the components globally so you'll be able to leverage the plugin in every components.\n```\nimport VueScrollMonitor from 'vue-scrollmonitor'\nVue.use(VueScrollMonitor)\n```\n\n\n#### or registering components directly\nOtherwise fell free to import and register manually the two plugins.\n```\nimport { ScrollContainer, ScrollItem } from 'vue-scrollmonitor'\n// then, in component definition:\n{\n  name: 'MyComponent',\n  components: {\n    ScrollContainer,\n    ScrollItem,\n  }\n}\n```\n\n### Doc\n[see source of example for recipes]()\nTo track items with ScrollItem component you'll need to wrap them in a ScrollContainer component.\n\n#### ScrollContainer\n---\n##### Props\n__container__ :DOMElement  \nBy default, ScrollContainer will listen to scroll events emitted from HTML body, but you can setup another DOM element to watch for scrolling event. [see also](https://github.com/stutrek/scrollMonitor#when-the-body-scrolls)\n\n---\n##### Events\n__change__ =\u003e Object  \nEvery time scrollMonitor updates, it will fire a change event transporting the state of tracked items (aka all ScrollItem components children of this container).\n\nOne common pattern is to retrieve the state in the parent component (or register it in Vuex state for example) listening to this event. That way you can have access the state in the template easily.\n\nThe state is an index following this structure:\n```\n{\n  id: {\n    isAboveViewport: Boolean,\n    isBelowViewport: Boolean,\n    isInViewport: Boolean,\n    isFullyInViewport: Boolean,\n  }\n  ...\n}\n```\n\n#### ScrollItem\n\n---\n##### Props\n\n__id__ :String|Number  \n*default: random uid*  \nId is required to keep track of each item watcher \u0026 state. You can pass your own id as long as you make sure it is unique for each ScrollItem in a ScrollContainer component.\n\n__lock__ :Boolean  \n*default: false*  \n[see](https://github.com/stutrek/scrollMonitor#locking)\n\n__offset__ :Number | { top :Number, bottom :Number }  \n*default: undefined*  \n[see](https://github.com/stutrek/scrollMonitor#locking)\n\n---\n##### Events\n\n__change__ =\u003e Object  \nsame as ScrollContainer but for this item.\n\n### License\n\nMIT © Alexandre Bonaventure\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrebonaventure%2Fvue-scrollmonitor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandrebonaventure%2Fvue-scrollmonitor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrebonaventure%2Fvue-scrollmonitor/lists"}