{"id":21832298,"url":"https://github.com/hoseungme/flickable-scroll","last_synced_at":"2025-10-29T18:09:30.342Z","repository":{"id":181714671,"uuid":"665225715","full_name":"hoseungme/flickable-scroll","owner":"hoseungme","description":"A flickable web scroller","archived":false,"fork":false,"pushed_at":"2023-08-01T08:44:35.000Z","size":149,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-18T21:20:22.035Z","etag":null,"topics":["flicking","scroll","ui","web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoseungme.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2023-07-11T18:11:43.000Z","updated_at":"2024-08-19T09:07:27.000Z","dependencies_parsed_at":"2024-03-30T04:22:29.713Z","dependency_job_id":"6bab7ea6-b40a-4b91-aaf3-5ff47fdfd748","html_url":"https://github.com/hoseungme/flickable-scroll","commit_stats":null,"previous_names":["hoseungjang/flickable-scroll","hoseungme/flickable-scroll"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/hoseungme/flickable-scroll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoseungme%2Fflickable-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoseungme%2Fflickable-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoseungme%2Fflickable-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoseungme%2Fflickable-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoseungme","download_url":"https://codeload.github.com/hoseungme/flickable-scroll/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoseungme%2Fflickable-scroll/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281670646,"owners_count":26541509,"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","status":"online","status_checked_at":"2025-10-29T02:00:06.901Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["flicking","scroll","ui","web"],"created_at":"2024-11-27T19:19:02.661Z","updated_at":"2025-10-29T18:09:30.286Z","avatar_url":"https://github.com/hoseungme.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flickable-scroll\n\nhttps://github.com/HoseungJang/flickable-scroll/assets/39669819/0ed83574-a6ac-4033-af39-e1c725fef7a5\n\n---\n\n- [Overview](#overview)\n- [Examples](#examples)\n- [API Reference](#api-reference)\n\n---\n\n# Overview\n\n`flickable-scroll` is a flickable web scroller, which handles only scroll jobs. In other words, you can be free to write layout and style and then you just pass scroller options based on it. Let's see examples below.\n\n# Examples\n\nThis is an example template. Note the changes of `options` and `style` in each example.\n\n```tsx\nconst ref = useRef\u003cHTMLDivElement\u003e(null);\n\nuseEffect(() =\u003e {\n  const current = ref.current;\n  if (current == null) {\n    return;\n  }\n\n  const options: ScrollerOptions = {\n    /* ... */\n  };\n\n  const scroller = new FlickableScroller(current);\n  return () =\u003e scroller.destroy();\n}, []);\n\nconst style: CSSProperties = {\n  /* ... */\n};\n\nreturn (\n  \u003cdiv style={{ width: \"100vw\", height: \"100vh\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\" }}\u003e\n    \u003cdiv\n      ref={ref}\n      style={{\n        width: 800,\n        height: 800,\n        position: \"fixed\",\n        overflow: \"hidden\",\n        ...style,\n      }}\n    \u003e\n      \u003cdiv style={{ backgroundColor: \"lavender\", fontSize: 50 }}\u003eScroll Top\u003c/div\u003e\n      {Array.from({ length: 2 }).map((_, index) =\u003e (\n        \u003cFragment key={index}\u003e\n          \u003cdiv style={{ width: 800, height: 800, flexShrink: 0, backgroundColor: \"pink\" }} /\u003e\n          \u003cdiv style={{ width: 800, height: 800, flexShrink: 0, backgroundColor: \"skyblue\" }} /\u003e\n          \u003cdiv style={{ width: 800, height: 800, flexShrink: 0, backgroundColor: \"lavender\" }}\u003e\u003c/div\u003e\n        \u003c/Fragment\u003e\n      ))}\n      \u003cdiv style={{ backgroundColor: \"pink\", fontSize: 50 }}\u003eScroll Bottom\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n);\n```\n\n## Vertical Scroll\n\n```typescript\nconst options = {\n  direction: \"y\",\n};\n```\n\n```typescript\nconst style = {};\n```\n\nhttps://github.com/HoseungJang/flickable-scroll/assets/39669819/089e2de5-0818-4462-ab0b-122ea6fcbd6a\n\n## Reversed Vertical Scroll\n\n```typescript\nconst options = {\n  direction: \"y\",\n  reverse: true,\n};\n```\n\n```typescript\nconst style = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  justifyContent: \"flex-end\",\n};\n```\n\nhttps://github.com/HoseungJang/flickable-scroll/assets/39669819/9eefe295-f8fe-49f7-9f92-c390dc70f43a\n\n## Horizontal Scroll\n\n```typescript\nconst options = {\n  direction: \"x\",\n};\n```\n\n```typescript\nconst style = {\n  display: \"flex\",\n};\n```\n\nhttps://github.com/HoseungJang/flickable-scroll/assets/39669819/a90eeff8-9e18-4d45-a229-66813ba89901\n\n## Reversed Horizontal Scroll\n\n```typescript\nconst options = {\n  direction: \"x\",\n  reverse: true,\n};\n```\n\n```typescript\nconst style = {\n  display: \"flex\",\n  justifyContent: \"flex-end\",\n};\n```\n\nhttps://github.com/HoseungJang/flickable-scroll/assets/39669819/02c80887-cc20-4098-aa27-5c8236df8870\n\n# API Reference\n\n```typescript\nconst options = {\n  direction,\n  reverse,\n  onScrollStart,\n  onScrollMove,\n  onScrollEnd,\n};\n\nconst scroller = new FlickableScroller(container, options);\n\nscroller.lock();\n\nscroller.unlock();\n\nscroller.destory();\n```\n\n- Parameters of `FlickableScroller`:\n  - `container`: `HTMLElement`\n    - Required\n    - A scroll container element.\n  - options\n    - Optional\n    - properties\n      - `direction`: `\"x\" | \"y\"`\n        - Optional\n        - Defaults to `\"y\"`\n        - A scroll direction\n      - `reverse`: `boolean`\n        - Optional\n        - Defaults to `false`\n        - If set to true, scroll direction will be reversed.\n      - `onScrollStart`: `(e: ScrollEvent) =\u003e void`\n        - Optional\n        - This function will fire when a user starts to scroll\n      - `onScrollMove`: `(e: ScrollEvent) =\u003e void`\n        - Optional\n        - This function will fire when a user is scrolling\n      - `onScrollEnd`: `(e: ScrollEvent) =\u003e void`\n        - Optional\n        - This function will fire when a user finishes to scroll\n- Methods of `FlickableScroller`:\n  - `lock()`: `() =\u003e void`\n    - This method locks scroll of the scroller.\n  - `unlock()`: `() =\u003e void`\n    - This method unlocks scroll of the scroller.\n  - `destroy()`: `() =\u003e void`\n    - This method destory the scroller. All event handlers will be removed, and all animations will be stopped.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoseungme%2Fflickable-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoseungme%2Fflickable-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoseungme%2Fflickable-scroll/lists"}