{"id":29271846,"url":"https://github.com/rascal-coder/view-sense","last_synced_at":"2025-07-05T00:07:26.148Z","repository":{"id":297366556,"uuid":"995988156","full_name":"Rascal-Coder/view-sense","owner":"Rascal-Coder","description":"当DOM元素进入或离开视口时获得通知。👀","archived":false,"fork":false,"pushed_at":"2025-06-05T06:54:00.000Z","size":71,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-05T07:12:34.518Z","etag":null,"topics":["tyepscript","utility","viewport","vitest"],"latest_commit_sha":null,"homepage":"https://view-sense-docs.vercel.app/","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/Rascal-Coder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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,"zenodo":null}},"created_at":"2025-06-04T09:43:36.000Z","updated_at":"2025-06-05T07:04:24.000Z","dependencies_parsed_at":"2025-06-05T07:14:27.424Z","dependency_job_id":"9ee7e637-8cde-4093-9c5c-6c8336b83a8b","html_url":"https://github.com/Rascal-Coder/view-sense","commit_stats":null,"previous_names":["rascal-coder/view-sense"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Rascal-Coder/view-sense","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rascal-Coder%2Fview-sense","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rascal-Coder%2Fview-sense/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rascal-Coder%2Fview-sense/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rascal-Coder%2Fview-sense/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rascal-Coder","download_url":"https://codeload.github.com/Rascal-Coder/view-sense/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rascal-Coder%2Fview-sense/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263636813,"owners_count":23492308,"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":["tyepscript","utility","viewport","vitest"],"created_at":"2025-07-05T00:07:24.602Z","updated_at":"2025-07-05T00:07:26.131Z","avatar_url":"https://github.com/Rascal-Coder.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# view-sense\n\n一个轻量级的视口元素检测库，当DOM元素进入或离开视口时获得通知。\n\n## 特点\n\n- 🔍 轻松检测元素进入或离开视口\n- 🎯 可配置的检测阈值和偏移量\n- ⚡ 高性能，使用节流优化滚动事件\n- 📦 轻量级，无依赖\n- 🔄 支持链式调用\n- 📱 响应式，支持所有现代浏览器\n\n## 安装\n\n```bash\nnpm install view-sense\nimport viewSense from  \"view-sense\"\n```\n\n或者通过CDN：\n\n```html\n\u003cscript src=\"https://unpkg.com/view-sense/dist/index.js\"\u003e\u003c/script\u003e\n```\n\n## 基本用法\n\n使用ViewSense，您可以注册当元素**进入**或**离开**视口时调用的处理函数。每个处理函数接收一个参数，即进入或离开视口的元素。\n\n```js\nviewSense('.someSelector')\n    .on('enter', doSomething)\n    .on('exit', el =\u003e {\n        el.style.opacity = 0.5;\n    });\n```\n\n## API\n\nViewSense为每组通过`viewSense(\u003cselector\u003e)`获取的元素维护一个单独的处理函数注册表。每个注册表都提供相同的四种方法。ViewSense还提供四种顶层方法（`is`、`offset`、`threshold`和`test`）。\n\n### viewSense(\\\u003cselector\u003e).on(\\\u003cevent\u003e, \\\u003chandler\u003e)\n\u003e 为由`selector`选择的元素注册`event`事件的处理函数。ViewSense只发出`'enter'`和`'exit'`两种事件。\n\n\u003e ```js\n\u003e viewSense('.someSelector').on('enter', doSomething);\n\u003e ```\n\n### viewSense(\\\u003cselector\u003e).once(\\\u003cevent\u003e, \\\u003chandler\u003e)\n\u003e 为由`selector`选择的元素注册`event`事件的处理函数。通过`once`注册的处理函数只会被调用一次。\n\n\u003e ```js\n\u003e viewSense('.someSelector').once('enter', doSomething);\n\u003e ```\n\n### viewSense.is(\\\u003celement\u003e)\n\u003e 检查`element`是否在视口中。\n\n\u003e ```js\n\u003e viewSense.is(document.querySelector('.someSelector'));\n\u003e // =\u003e true\n\u003e ```\n\n### viewSense.offset(\\\u003coffset\u003e)\n\u003e 默认情况下，ViewSense认为元素只要触及视口的任何边缘就被视为在视口中。您可以设置一个与边缘的偏移量。例如，偏移量为`100`将考虑元素至少突破视口任何边缘`100`像素才会被视为在视口中。`offset`可以是正数或负数。\n\n\u003e ```js\n\u003e viewSense.offset(100);\n\u003e viewSense.offset(-50);\n\u003e ```\n\n\u003e 也可以通过传递一个对象来为每个方向单独设置偏移量。\n\n\u003e ```js\n\u003e viewSense.offset({\n\u003e     top: 100,\n\u003e     right: 75,\n\u003e     bottom: 50,\n\u003e     left: 25\n\u003e });\n\u003e ```\n\n### viewSense.threshold(\\\u003cthreshold\u003e)\n\u003e 设置元素的高度**和**宽度需要可见的比例才能被视为在视口中。默认值为`0`，表示任何可见量都算。阈值为`0.5`或`1`将分别要求元素的高度和宽度的一半或全部可见。`threshold`必须是介于`0`和`1`之间的数字。\n\n\u003e ```js\n\u003e viewSense.threshold(0);\n\u003e viewSense.threshold(0.5);\n\u003e viewSense.threshold(1);\n\u003e ```\n\n### viewSense.test(\\\u003ctest\u003e)\n\u003e 用自定义函数覆盖ViewSense的默认可见性标准。该函数将接收元素和选项对象作为唯一的两个参数。当元素应该被视为可见时返回`true`，否则返回`false`。\n\n\u003e ```js\n\u003e viewSense.test((el, options) =\u003e {\n\u003e     // ...\n\u003e });\n\u003e ```\n\n### viewSense(\\\u003cselector\u003e).check()\n\u003e 手动检查由`selector`选择的元素的状态。默认情况下，所有注册表都会在`window`的`scroll`、`resize`和`load`事件上进行检查。\n\n\u003e ```js\n\u003e viewSense('.someSelector').check();\n\u003e ```\n\n### viewSense(\\\u003cselector\u003e).emit(\\\u003cevent\u003e, \\\u003celement\u003e)\n\u003e 手动为任何单个元素触发`event`事件。\n\n\u003e ```js\n\u003e viewSense('.someSelector').emit('exit', document.querySelectorAll('.someSelector')[0]);\n\u003e ```\n\n## 浏览器支持\n\n- Chrome (最新)\n- Firefox (最新)\n- Safari (最新)\n- Edge (最新)\n- IE 11+\n\n## 许可证\n\nMIT ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frascal-coder%2Fview-sense","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frascal-coder%2Fview-sense","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frascal-coder%2Fview-sense/lists"}