{"id":17036035,"url":"https://github.com/phucbm/scroll-snooper","last_synced_at":"2025-04-12T12:32:25.273Z","repository":{"id":45544174,"uuid":"417796763","full_name":"phucbm/scroll-snooper","owner":"phucbm","description":"🏄‍♂️ 4KB vanilla JS to use as a lite version of GSAP Scroll Trigger","archived":false,"fork":false,"pushed_at":"2023-11-17T09:25:06.000Z","size":1540,"stargazers_count":11,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-09-19T02:53:54.271Z","etag":null,"topics":["javascript","scroll","scroll-monitor","scroll-snooper","scroll-watcher","scrolling","scrolltrigger"],"latest_commit_sha":null,"homepage":"https://scroll-snooper.netlify.app","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/phucbm.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}},"created_at":"2021-10-16T10:42:31.000Z","updated_at":"2024-05-22T15:19:48.000Z","dependencies_parsed_at":"2023-11-17T10:45:38.828Z","dependency_job_id":null,"html_url":"https://github.com/phucbm/scroll-snooper","commit_stats":{"total_commits":63,"total_committers":2,"mean_commits":31.5,"dds":"0.015873015873015928","last_synced_commit":"336b0267bf0f1d32d4bc51341fd8b72bb56f9daa"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fscroll-snooper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fscroll-snooper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fscroll-snooper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fscroll-snooper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phucbm","download_url":"https://codeload.github.com/phucbm/scroll-snooper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219847571,"owners_count":16556351,"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":["javascript","scroll","scroll-monitor","scroll-snooper","scroll-watcher","scrolling","scrolltrigger"],"created_at":"2024-10-14T08:48:59.788Z","updated_at":"2024-10-14T08:49:00.252Z","avatar_url":"https://github.com/phucbm.png","language":"JavaScript","readme":"# Scroll Snooper [![Netlify Status](https://api.netlify.com/api/v1/badges/02c06c92-b238-4648-956e-339ccaa6a779/deploy-status)](https://app.netlify.com/sites/scroll-snooper/deploys)\n\n[![release](https://badgen.net/github/release/phucbm/scroll-snooper/?cache=600)](https://github.com/phucbm/scroll-snooper/releases/latest)\n[![minified](https://badgen.net/badge/minified/4KB/cyan)](https://www.jsdelivr.com/package/gh/phucbm/scroll-snooper)\n[![license](https://badgen.net/github/license/phucbm/scroll-snooper/)](https://github.com/phucbm/scroll-snooper/blob/main/LICENSE)\n[![jsdelivr](https://data.jsdelivr.com/v1/package/gh/phucbm/scroll-snooper/badge?style=rounded)](https://www.jsdelivr.com/package/gh/phucbm/scroll-snooper)\n[![CodePen](https://badgen.net/badge/Demo/CodePen/black)](https://codepen.io/phucbui/pen/GRvxYeg)\n\n\u003e 🛼 Pure JavaScript API that goes snooping around elements while scrolling\n\n## Getting started\n\n### NPM package\n\n```shell\nnpm i scroll-snooper\n```\n\nor as a dev dependency\n\n```shell\nnpm i scroll-snooper --save-dev\n```\n\nImport\n\n```js\nimport \"scroll-snooper\";\n\n// your script\n```\n\n### CDN\n\n👉 CDN Hosted - [jsDelivr](https://www.jsdelivr.com/package/gh/phucbm/scroll-snooper)\n\n👉 Self hosted - [Download the latest release](https://github.com/phucbm/scroll-snooper/releases/latest)\n\n## Quick use\n\n### Create watcher to listen to events\n\n```js\nScrollSnooper.create({\n    trigger: document.querySelector('.block'),\n    onEnter: data =\u003e {\n        console.log(data);\n    },\n    onLeave: data =\u003e {\n        console.log(data);\n    },\n    onScroll: data =\u003e {\n        console.log(data);\n    },\n});\n```\n\n### Is in viewport\n\n```js\nconsole.log(ScrollSnooper.isInViewport(document.querySelector('.block')));\n```\n\nor only return true if at least 20% of element is appearing in viewport\n\n```js\nconsole.log(ScrollSnooper.isInViewport(document.querySelector('.block'), 0.2));\n```\n\n### Visibility\n\nGet the number of pixels and proportion (%) of the element displaying on the viewport.\n\n```js\nconsole.log(ScrollSnooper.visibility(document.querySelector('.block')));\n```\n\n### The most visible element\n\nSelect multiple elements and pick out the most visible one based on its pixel displaying on the viewport.\n\n```js\nconsole.log(ScrollSnooper.getTheMostVisible(document.querySelectorAll('.blocks')));\n```\n\nor use with create()\n\n```js\nScrollSnooper.create({\n    trigger: document.querySelectorAll('.blocks'),\n    isGetTheMostVisible: true,\n    onChange: data =\u003e {\n        console.log('onChange', data);\n    },\n    onFound: data =\u003e {\n        console.log('onFound', data);\n    },\n});\n```\n\n## Documentation\n\n### ScrollSnooper.create({}) : void\n\n| Name    | Type                | Default      | Note                                                                                |\n|---------|---------------------|--------------|-------------------------------------------------------------------------------------|\n| trigger | jQuery, HTMLElement | `undefined`  | Element(s).                                                                         |\n| start   | string              | `top bottom` | Starting position, `top bottom` means _\"when the top of the trigger hits the bottom |\n\nof the viewport\"_, `\"center center\"` means _\"when the center of the trigger hits the center of the\nviewport\"_. `\"top 90%\"` or `\"bottom 100px\"` are also accepted. |\n| end | string | `bottom top`  | Ending position. |\n| onEnter | function | data =\u003e {} | A callback for when the trigger is scrolled into view. |\n| onLeave | function | data =\u003e {} | A callback for when the trigger is scrolled out of view. |\n| onScroll | function | data =\u003e {} | A callback that gets called everytime the scroll position changed (scrolling,\nresizing). |\n\nWhen `isGetTheMostVisible` is `true`\n\n| Name                | Type     | Default    | Note                                                                                            |\n|---------------------|----------|------------|-------------------------------------------------------------------------------------------------|\n| isGetTheMostVisible | boolean  | false      | Activate the watcher for multiple triggers.                                                     |\n| onChange            | function | data =\u003e {} | A callback that gets called everytime the most visible element changed (including `undefined`). |\n| onFound             | function | data =\u003e {} | A callback that gets called everytime one of the triggers is scrolled into view.                |\n\n### ScrollSnooper.isInViewport( element: jQuery | HTML element, proportion: number) : Boolean\n\nReturns `true` if the element is in the viewport. You can optionally specify a minimum proportion, like\nScrollSnooper.isInViewport(element, 0.2) would only return true if at least 20% of the element is in the viewport.\n\n```js\nconsole.log(ScrollSnooper.isInViewport(document.querySelector('.block'), 0.2));\n```\n\n### ScrollSnooper.visibility( element: jQuery | HTML element ) : {pixel, proportion}\n\nGet the number of pixels and proportion (%) of the element displaying on the viewport.\n\n```js\nconsole.log(ScrollSnooper.visibility(document.querySelector('.block')));\n```\n\n### ScrollSnooper.getTheMostVisible( element: jQuery | HTML element, atLeastPixel: number ) : Object\n\nSelect multiple elements and pick out the most visible one based on its pixel displaying on the viewport.\n\n```js\nconsole.log(ScrollSnooper.getTheMostVisible(document.querySelectorAll('.blocks')));\n```\n\n## Deployment\n\nStart dev server\n\n```shell\nnpm run dev\n```\n\nBuild production files (UMD and NPM package)\n\n```shell\nnpm run prod\n```\n\nBuild sources from `./web` to `./build`\n\n```shell\nnpm run build\n```\n\nBuild files from `./src` to `./dist` then publish to `npm`\n\n```shell\nnpm run publish\n```\n\n## License\n\n[MIT License](https://github.com/phucbm/scroll-snooper/blob/main/LICENSE)\n\nCopyright (c) 2022 Minh-Phuc Bui\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fscroll-snooper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphucbm%2Fscroll-snooper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fscroll-snooper/lists"}