{"id":24416820,"url":"https://github.com/siaikin/sync-scroll","last_synced_at":"2025-04-12T04:52:38.417Z","repository":{"id":39549915,"uuid":"182256256","full_name":"siaikin/sync-scroll","owner":"siaikin","description":"让两个HTML元素进行同步滚动的工具","archived":false,"fork":false,"pushed_at":"2022-12-09T20:26:44.000Z","size":3501,"stargazers_count":16,"open_issues_count":20,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-12T04:52:21.224Z","etag":null,"topics":["markdown","scroll","scrolling","sync"],"latest_commit_sha":null,"homepage":"https://siaikin.github.io/sync-scroll/","language":"HTML","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/siaikin.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}},"created_at":"2019-04-19T11:43:42.000Z","updated_at":"2024-09-23T16:02:09.000Z","dependencies_parsed_at":"2023-01-26T00:45:40.678Z","dependency_job_id":null,"html_url":"https://github.com/siaikin/sync-scroll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siaikin%2Fsync-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siaikin%2Fsync-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siaikin%2Fsync-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siaikin%2Fsync-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siaikin","download_url":"https://codeload.github.com/siaikin/sync-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248519473,"owners_count":21117757,"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":["markdown","scroll","scrolling","sync"],"created_at":"2025-01-20T08:14:31.702Z","updated_at":"2025-04-12T04:52:38.392Z","avatar_url":"https://github.com/siaikin.png","language":"HTML","readme":"# Sync Scroll\n![GitHub stars](https://img.shields.io/github/stars/abc1310054026/sync-scroll.svg?style=social)\n![GitHub followers](https://img.shields.io/github/followers/abc1310054026.svg?style=social)\n![GitHub forks](https://img.shields.io/github/forks/abc1310054026/sync-scroll.svg?style=social)\n![GitHub watchers](https://img.shields.io/github/watchers/abc1310054026/sync-scroll.svg?style=social)\n![GitHub last commit](https://img.shields.io/github/last-commit/abc1310054026/sync-scroll.svg)\n![NPM](https://img.shields.io/npm/l/md-sync-scroll.svg)\n![npm](https://img.shields.io/npm/v/md-sync-scroll.svg)\n\n这是一个基于**片段**的同步滚动插件。\n\n请查看Github上的[Demo页][https://abc1310054026.github.io/sync-scroll/]，上面有具体的效果。\n如果你不关心实现的方式，请直接看**Usage**\n## 片断\n```markdown\n// 片段start\n# 这表示一个片段的开始\n这些是片段内容\n这些也是片段内容\n// 片段end\n```\n如果你想要使用它让你的内容能进行同步滚动，你需要让你的内容符合以上的布局。这种布局很多Markdown格式的文本都是天然符合的，不过就是标题-内容-标题-内容...\n\n示例：\n\n```markdown\n# 文章标题\n标题下的内容...\n# 文章标题2\n标题下的内容2...\n...\n```\n其实这个页面就是一个很好的例子，当你滚动滚轮或滚动条的时候，注意一下以`#`号开头的段落，应该能看到左右两边的滚动距离是不同的。\n\n# Usage\n如果想让SyncScroll正常运行，需要你用一个块级元素包裹你的内容，你可以按`F12`查看此页的代码。\n\n我用`\u003cdiv\u003e`包裹了里面的内容，还有设置`overflow: auto`和`position: reactive`。\n请务必设置overflow和position，overflow我想不必多说，它决定了是否能进行滚动。\n\n对于position，因为我使用`HTMLElement.offsetTop`来获取片段的偏移高度，\n而`offsetTop`依赖于最近的定位元素。如果你不将包裹的元素设置为定位元素，将无法获取到正确的`offsetTop`。\n\n下面我们进入正题，`md-sync-scroll`的用法很简单，你只需要将要进行同步的元素和查询子元素的查询语句\n传入`addArea(el, queryCriteria)`方法中就好了。然后如果你改变了其中的内容，请调用`update()`方法以更新内容。\n\n1. 首先引入\n```js\nimport {SyncScroll} from \"md-sync-scroll\";\n```\n2. 设置要进行同步的DOM元素。你需要指定每个`Area`的子元素查询条件。\n\n在内部我使用`querySelectorAll`来查询子元素。所以你需要传入符合css选择器语法的字符串。\n```js\nimport {SyncScroll, ConfigOptions} from \"md-sync-scroll\";\n\nconst editArea = document.getElementById('edit');\nconst previewArea = document.getElementById('preview');\n// 通过ConfigOptions可以配置参数，详细信息见下文API-\u003eConfigOptions\nconst options = ConfigOptions.instance({\n     syncWithClick: true,\n     offsetScroll: 100\n});\nconst syncScroll = new SyncScroll(options);\n\n// 对于本页面来说，我用`h1-6`指示片段的开始，那么我就要查询被我指定为`h1-h6`的元素\n// 在左边我用class='h1-6'标记，在右边用\u003ch1\u003e-\u003ch6\u003e表示\n// syncScroll.addArea(editArea, '.h1,.h2,.h3,.h4,.h5,.h6');\n// syncScroll.addArea(previewArea, 'h1,h2,h3,h4,h5,h6');\nsyncScroll.addAreas([\n    {\n        area: editArea,\n        queryCriteria: '.h1,.h2,.h3,.h4,.h5,.h6'\n    },\n    {\n        area: previewArea,\n        queryCriteria: 'h1,h2,h3,h4,h5,h6'\n    }\n]);\n// 可以调用`addArea`单个添加，在`addArea`调用后，需要手动调用`update`更新数据\n// syncScroll.addArea({\n//     area: editArea,\n//     queryCriteria: '.h1,.h2,.h3,.h4,.h5,.h6'\n// });\n// syncScroll.addArea({\n//     area: previewArea,\n//     queryCriteria: 'h1,h2,h3,h4,h5,h6'\n// });\n// syncScroll.update();\n\n```\n# API\n## SyncScroll\n### PROPERTY\n| Prop name | Type | Default | Description |\n| --- | --- | --- | --- |\n| areas | Array\u003cArea\u003e | null | Area的数组 |\n| controller | ScrollControl | null | 内部的control类，正常使用请不要碰它，主要作用是关联各个`Area`。 |\n\n### FUNCTION\n| Func name | Params | Description |\n| --- | --- | --- |\n| SyncScroll | options? | 构造函数，options类型为ConfigOptions |\n| addAreas | [{el, queryCriteria}, ...] | 添加多个`Area`，指定Dom元素el，和子元素查询语句，会自动调用更新方法。 |\n| addArea | {el, queryCriteria} | 添加一个`Area`，指定一个Dom元素el，和子元素查询语句 |\n| update | null | `Area`内容改变时调用，更新所有的`Area` |\n| destroy | null | 销毁实例 |\n\n## ConfigOptions\n### PROPERTY\n| Prop name | Type | Default | Description |\n| --- | --- | --- | --- |\n| syncWithLick | boolean | false | `click`事件是否触发滚动 |\n| offsetScroll | number | 0 | 滚动对齐位置的偏移量，默认在顶部即`0` |\n\n### FUNCTION\n| Func name | Params | Description |\n| --- | --- | --- |\n| instance | {syncWithClick, offsetScroll} | 获取一个实例，参数为上面PROPERTY的参数，例子在上文usage第2项 |\n| ConfigOptions | {syncWithClick, offsetScroll} | 推荐使用`instance`来获取`ConfigOptions`来获取对象能稍微减小内存开销。构造函数，参数为上面PROPERTY的参数 |\n\n有BUG请务必提issue，或者联系我`abc1310054026@163.com`\n\n[https://abc1310054026.github.io/sync-scroll/]: https://abc1310054026.github.io/sync-scroll/\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiaikin%2Fsync-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiaikin%2Fsync-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiaikin%2Fsync-scroll/lists"}