{"_id":"@171h/scroll-sync","name":"@171h/scroll-sync","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@171h/scroll-sync","type":"module","version":"0.0.1","packageManager":"pnpm@8.6.0","description":"Scroll synchronization (`scroll-sync`), which associates multiple elements with scroll properties (`overflow: scroll`). When a scroll event occurs in one of the elements, the scroll effect is mapped to all the elements associated with it. To achieve synch","author":{"name":"171h","email":"weiyidechicheng@outlook.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/171h/scroll-sync.git"},"keywords":[],"sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.mjs"}},"main":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","typesVersions":{"*":{"*":["./dist/*","./dist/index.d.ts"]}},"scripts":{"build":"unbuild","dev":"unbuild --stub","play":"pnpm --filter=play dev","postinstall":"pnpm --filter=play postinstall","lint":"eslint .","prepublishOnly":"nr build","release":"bumpp && npm publish --access public","start":"esno src/index.ts","test":"vitest","typecheck":"tsc --noEmit"},"devDependencies":{"@antfu/eslint-config":"^0.39.4","@antfu/ni":"^0.21.3","@antfu/utils":"^0.7.4","@types/node":"^18.16.16","bumpp":"^9.1.0","eslint":"^8.41.0","esno":"^0.16.3","pnpm":"^8.6.0","rimraf":"^5.0.1","typescript":"^5.0.4","unbuild":"^1.2.1","vite":"^4.3.9","vitest":"^0.31.3"},"pnpm":{"neverBuiltDependencies":["fast-folder-size"]},"gitHead":"f1622376df58fea1000d65551f931a30c5c31faa","bugs":{"url":"https://github.com/171h/scroll-sync/issues"},"homepage":"https://github.com/171h/scroll-sync#readme","_id":"@171h/scroll-sync@0.0.1","_nodeVersion":"20.3.0","_npmVersion":"9.7.2","dist":{"integrity":"sha512-y3SI+4lACq4sI7Gosvn99pasuFqKREuuCw2HIGRWIKUPtiUN1uGFuleiQXpzNyM77qj2CbxUInov5qRKNigGqQ==","shasum":"e88715d09ba2531291177efc683c8b56637b9141","tarball":"https://registry.npmjs.org/@171h/scroll-sync/-/scroll-sync-0.0.1.tgz","fileCount":6,"unpackedSize":12476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHV4VQecp7DIVFhWB/m4a5RWdcm/g/4WOvUAib40uv9AAiBgABKv6ek3FPevJg7VoQgHOuzo2yU+gBiNVZX0mWLG3A=="}]},"_npmUser":{"name":"171h","email":"1091088708@qq.com"},"directories":{},"maintainers":[{"name":"171h","email":"1091088708@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scroll-sync_0.0.1_1687939975830_0.315526967007306"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-28T08:12:55.772Z","0.0.1":"2023-06-28T08:12:55.983Z","modified":"2023-06-28T08:12:56.138Z"},"maintainers":[{"name":"171h","email":"1091088708@qq.com"}],"description":"Scroll synchronization (`scroll-sync`), which associates multiple elements with scroll properties (`overflow: scroll`). When a scroll event occurs in one of the elements, the scroll effect is mapped to all the elements associated with it. To achieve synch","homepage":"https://github.com/171h/scroll-sync#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/171h/scroll-sync.git"},"author":{"name":"171h","email":"weiyidechicheng@outlook.com"},"bugs":{"url":"https://github.com/171h/scroll-sync/issues"},"license":"MIT","readme":"# Scroll Sync\r\n\r\nScroll synchronization (`scroll-sync`), which associates multiple elements with scroll properties (`overflow: scroll`). When a scroll event occurs in one of the elements, the scroll effect is mapped to all the elements associated with it. To achieve synchronization purposes. `scroll-sync` supports fixed synchronization (`px`) and relative synchronization (`%`).\r\n\r\n## Acknowledgements\r\nThis is a rewrite of [`scroll-sync`](https://github.com/kiccer/scroll-sync) with `typescript` and added some new features liking scroll-sync only by x or y.\r\n\r\n## INSTALL\r\n\r\n```shell\r\nnpm install @171h/scroll-sync\r\n```\r\n\r\n## USAGE\r\n\r\n```js\r\nimport ScrollSync from 'scroll-sync'\r\n\r\nconst ss = new ScrollSync({\r\n  disabled: false, // [Boolean] Default value, allow to be empty.\r\n  relative: true, // [Boolean] Default value, allow to be empty.\r\n  doms: document.querySelectorAll('.scroll-container') // [Array] These elements must set scroll attributes.\r\n})\r\n\r\n// do sth....\r\n// You can also find another opportunity to set related elements after instantiating the object.\r\nss.set(document.querySelectorAll('.scroll-container'))\r\n\r\n// Or add or delete.\r\n// ss.add([elements])\r\n// ss.remove([elements])\r\n\r\n// You can also actively clear the listener event and clear the cache.\r\n// ss.clear()\r\n```\r\n\r\n### API\r\n##### .add()\r\n// add elements to scroll-sync.\r\n```js\r\nss.add(document.documentElement)\r\n// or use array.\r\nss.add(document.querySelectorAll('.other-scroll-container'))\r\n```\r\n\r\n#### .remove()\r\n// remove elements to scroll-sync.\r\n```js\r\nss.remove(document.documentElement)\r\n// or use array.\r\nss.remove(document.querySelectorAll('.other-scroll-container'))\r\n```\r\n\r\n#### .set()\r\n// reset elements to scroll-sync.\r\n```js\r\nss.set(document.documentElement)\r\n// or use array.\r\nss.set(document.querySelectorAll('.other-scroll-container'))\r\n```\r\n\r\n#### .clear()\r\n// reset elements to scroll-sync.\r\n```js\r\nss.clear()\r\n```\r\n\r\n\r\n## DOCUMENT\r\n[Please click here for an online experience. (中文)](https://kiccer.github.io/scroll-sync/)\r\n","readmeFilename":"README.md"}