{"id":13495195,"url":"https://github.com/tuax/tua-body-scroll-lock","last_synced_at":"2026-01-08T13:16:19.538Z","repository":{"id":45146799,"uuid":"176721106","full_name":"tuax/tua-body-scroll-lock","owner":"tuax","description":"🔐 Body scroll locking that just works with everything","archived":false,"fork":false,"pushed_at":"2024-11-02T02:44:22.000Z","size":516,"stargazers_count":440,"open_issues_count":2,"forks_count":33,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-09T13:04:46.906Z","etag":null,"topics":["android","body-scroll-lock","bsl","chrome","firefox","freeze","ios","mobile","modal","overflow","pc","safari","scroll-lock","tua"],"latest_commit_sha":null,"homepage":"https://tuax.github.io/tua-body-scroll-lock/","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/tuax.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2019-03-20T11:43:11.000Z","updated_at":"2025-04-27T17:07:18.000Z","dependencies_parsed_at":"2024-06-18T13:36:20.255Z","dependency_job_id":"2afe2eb3-cce5-4c70-b3b3-d3e3eae719e0","html_url":"https://github.com/tuax/tua-body-scroll-lock","commit_stats":{"total_commits":101,"total_committers":11,"mean_commits":9.181818181818182,"dds":0.5742574257425743,"last_synced_commit":"5bf6d15db5e3b8f716e3e9b7778c51f07d1a11c5"},"previous_names":["tuateam/tua-body-scroll-lock"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuax%2Ftua-body-scroll-lock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuax%2Ftua-body-scroll-lock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuax%2Ftua-body-scroll-lock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuax%2Ftua-body-scroll-lock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tuax","download_url":"https://codeload.github.com/tuax/tua-body-scroll-lock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254083639,"owners_count":22011901,"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":["android","body-scroll-lock","bsl","chrome","firefox","freeze","ios","mobile","modal","overflow","pc","safari","scroll-lock","tua"],"created_at":"2024-07-31T19:01:32.336Z","updated_at":"2026-01-08T13:16:19.532Z","avatar_url":"https://github.com/tuax.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# tua-body-scroll-lock\n\n\u003cimg src=\"https://img.shields.io/badge/dependencies-none-green.svg\" alt=\"dependencies\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/tua-body-scroll-lock\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://badgen.net/npm/dm/tua-body-scroll-lock\" alt=\"Downloads per month\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/tua-body-scroll-lock.svg\" alt=\"Version\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/tua-body-scroll-lock/next.svg\" alt=\"Next Version\"\u003e\n  \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/tua-body-scroll-lock\" alt=\"npm bundle size\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/l/tua-body-scroll-lock.svg\" alt=\"License\"\u003e\n\u003c/a\u003e\n\n[English](./README.md) | 简体中文\n\n## 介绍\n`tua-body-scroll-lock` 解决了所有场景下滚动穿透的问题。\n\n- \u003ca href=\"https://stackblitz.com/edit/js-vixsu9?file=index.js\"\u003e\n  \u003cimg\n    width=\"160\"\n    alt=\"Open in StackBlitz\"\n    src=\"https://developer.stackblitz.com/img/open_in_stackblitz.svg\"\n  /\u003e\n\u003c/a\u003e\n\n- \u003ca href=\"https://codepen.io/buptsteve-the-encoder/pen/QWJmJxB\"\u003e\n  \u003cimg\n    width=\"160\"\n    alt=\"Open in codepen\"\n    src=\"https://assets.codepen.io/t-1/codepen-logo.svg\"\n  /\u003e\n\u003c/a\u003e\n\n- \u003ca href=\"https://codepen.io/evinma/pen/GgZMEbo\"\u003eOpen in codesandbox\u003c/a\u003e\n- \u003ca href=\"https://jsfiddle.net/evinma/epfLh4vw/\"\u003eOpen in jsfiddle\u003c/a\u003e\n- \u003ca href=\"https://jsbin.com/pebamowisi/edit?output\"\u003eOpen in jsbin\u003c/a\u003e\n\n\n## 安装\n### Node Package Manager(recommended)\n\n```bash\npnpm i tua-body-scroll-lock\n```\n\n### CDN\n\u003cdetails\u003e\n\u003csummary\u003eUMD(`tua-bsl.umd.js`)\u003c/summary\u003e\n\n```html\n\u003c!-- unpkg --\u003e\n\u003cscript src=\"https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.umd.js\"\u003e\u003c/script\u003e\n\n\u003c!-- jsdelivr --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.umd.js\"\u003e\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e压缩版本的 UMD(`tua-bsl.umd.min.js`)\u003c/summary\u003e\n\n```html\n\u003c!-- unpkg --\u003e\n\u003cscript src=\"https://unpkg.com/tua-body-scroll-lock\"\u003e\u003c/script\u003e\n\n\u003c!-- jsdelivr --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/tua-body-scroll-lock\"\u003e\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eESM in browser(`tua-bsl.esm.browser.js`)\u003c/summary\u003e\n\n```html\n\u003c!-- unpkg --\u003e\n\u003cscript type=\"module\"\u003e\n  import { lock, unlock } from 'https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js'\n\n  lock()\n  unlock()\n\u003c/script\u003e\n\n\u003c!-- jsdelivr --\u003e\n\u003cscript type=\"module\"\u003e\n  import { lock, unlock } from 'https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js'\n\n  lock()\n  unlock()\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e压缩版本的 ESM in browser(`tua-bsl.esm.browser.min.js`)\u003c/summary\u003e\n\n```html\n\u003c!-- unpkg --\u003e\n\u003cscript type=\"module\"\u003e\n  import { lock, unlock } from 'https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js'\n\n  lock()\n  unlock()\n\u003c/script\u003e\n\n\u003c!-- jsdelivr --\u003e\n\u003cscript type=\"module\"\u003e\n  import { lock, unlock } from 'https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js'\n\n  lock()\n  unlock()\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n## 使用\n### 常规操作\n\n```js\nimport { lock, unlock } from 'tua-body-scroll-lock'\n\nlock()\nunlock()\n```\n\n### 选项\n#### setOverflowForIOS: boolean（iOS lock only）\n\n版本: `1.6.0+`\n可选，默认值: `false`\n\n适用于在 iOS 模拟器中阻止鼠标滚动事件。\n\n#### overflowType: 'hidden' | 'clip'\n\n可选，默认值: 'hidden'\n\n`clip` 适合在高版本浏览器中（Chrome 90+）适配 `position: sticky` 的元素。\n\n\u003e https://caniuse.com/mdn-css_types_overflow_clip\n\n```js\nimport { lock } from 'tua-body-scroll-lock'\n\nlock(targetElement, { overflowType: 'clip' })\n```\n\n#### useGlobalLockState: boolean\n\n可选，默认值: false\n\n是否为页面上所有 BSL 实例共享 `lockState` 的状态。在你的页面上有多个 BSL 实例时很有用。\n\n### 目标元素需要滚动（iOS only）\n在某些场景下，禁止滚动穿透时，仍然有些元素需要滚动行为，此时传入目标 DOM 元素即可。\n\n```js\nimport { lock, unlock } from 'tua-body-scroll-lock'\nconst elementOne = document.querySelector('#elementOne')\nconst elementTwo = document.querySelector('#elementTwo')\n\n// 一个目标元素\nconst targetElement = elementOne\n// 多个目标元素\nconst targetElements = [elementOne, elementTwo]\n\nlock(targetElement)\nlock(targetElements)\nunlock(targetElement)\nunlock(targetElements)\n```\n\n\u003e PC 端和安卓端不需要传 targetElement。\n\n### clearBodyLocks\n在单页应用中，如果调用过`lock`，但是在跳转其他路由下的页面前忘记调用`unlock`，这是很糟糕的。因为对页面的操作都没有恢复，比如ios中禁止了`touchmove`；`clearBodyLocks`就是用来清除所有的副作用。当前你也可以调用`unlock`，但是如果之前调用过多次`lock`，那么就必须要调用多次`unlock`，这样很不友好。\n\n## 示例\n\n![bodyScrollLock](./tua-bsl.jpg)\n\n请查看这些示例项目\n- [vue](./examples/vue/)\n- [react](./examples/react/)\n- [vanilla](./examples/vanilla/)\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/evinma\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/16096567?v=4?s=100\" width=\"100px;\" alt=\"evinma\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eevinma\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tuax/tua-body-scroll-lock/commits?author=evinma\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/tuax/tua-body-scroll-lock/commits?author=evinma\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-evinma\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#translation-evinma\" title=\"Translation\"\u003e🌍\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://buptsteve.github.io\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/11501493?v=4?s=100\" width=\"100px;\" alt=\"StEve Young\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eStEve Young\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tuax/tua-body-scroll-lock/commits?author=BuptStEve\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/tuax/tua-body-scroll-lock/commits?author=BuptStEve\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-BuptStEve\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#translation-BuptStEve\" title=\"Translation\"\u003e🌍\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/li2go\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/11485337?v=4?s=100\" width=\"100px;\" alt=\"li2go\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eli2go\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tuax/tua-body-scroll-lock/commits?author=li2go\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/tuax/tua-body-scroll-lock/issues?q=author%3Ali2go\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/feitiange\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/7125157?v=4?s=100\" width=\"100px;\" alt=\"songyan,Wang\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003esongyan,Wang\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tuax/tua-body-scroll-lock/commits?author=feitiange\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/tuax/tua-body-scroll-lock/issues?q=author%3Afeitiange\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://grawl.ru/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/846774?v=4?s=100\" width=\"100px;\" alt=\"Даниил Пронин\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eДаниил Пронин\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tuax/tua-body-scroll-lock/issues?q=author%3AGrawl\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/magic-akari\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/7829098?v=4?s=100\" width=\"100px;\" alt=\"阿卡琳\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003e阿卡琳\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tuax/tua-body-scroll-lock/issues?q=author%3Amagic-akari\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://calibur.tv\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16357724?v=4?s=100\" width=\"100px;\" alt=\"falstack\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003efalstack\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tuax/tua-body-scroll-lock/commits?author=falstack\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/hustlelikeaboss\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/25436661?v=4?s=100\" width=\"100px;\" alt=\"David Q. Jin\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDavid Q. Jin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tuax/tua-body-scroll-lock/issues?q=author%3Ahustlelikeaboss\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n\u003e inspired by [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuax%2Ftua-body-scroll-lock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftuax%2Ftua-body-scroll-lock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuax%2Ftua-body-scroll-lock/lists"}