{"id":13459168,"url":"https://github.com/ilyashubin/scrollbooster","last_synced_at":"2025-03-24T16:31:23.925Z","repository":{"id":30643307,"uuid":"125617769","full_name":"ilyashubin/scrollbooster","owner":"ilyashubin","description":"Enjoyable content drag-to-scroll library","archived":false,"fork":false,"pushed_at":"2024-04-17T05:49:39.000Z","size":2771,"stargazers_count":991,"open_issues_count":55,"forks_count":81,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-23T19:41:39.608Z","etag":null,"topics":["drag","draggable","library","scroll","scroll-library","scrollable","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://ilyashubin.github.io/scrollbooster","language":"JavaScript","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/ilyashubin.png","metadata":{"files":{"readme":"README.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":"2018-03-17T10:18:30.000Z","updated_at":"2025-03-23T02:33:03.000Z","dependencies_parsed_at":"2024-06-18T13:31:47.922Z","dependency_job_id":"9d6e6288-67a9-476c-81a9-7a22489aebf8","html_url":"https://github.com/ilyashubin/scrollbooster","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilyashubin%2Fscrollbooster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilyashubin%2Fscrollbooster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilyashubin%2Fscrollbooster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilyashubin%2Fscrollbooster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ilyashubin","download_url":"https://codeload.github.com/ilyashubin/scrollbooster/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245308590,"owners_count":20594274,"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":["drag","draggable","library","scroll","scroll-library","scrollable","ui","ui-components"],"created_at":"2024-07-31T09:01:07.881Z","updated_at":"2025-03-24T16:31:23.486Z","avatar_url":"https://github.com/ilyashubin.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# ScrollBooster\n\nEnjoyable drag-to-scroll micro library (~2KB gzipped). Supports smooth content scroll via mouse/touch dragging, trackpad or mouse wheel. Zero dependencies.\n\nEasy to setup yet flexible enough to support any custom scrolling logic.\n\n### Installation\n\nYou can install it via `npm` or `yarn` package manager or via `script` tag:\n\n``` bash\nnpm i scrollbooster\n```\n\n``` bash\nyarn add scrollbooster\n```\n\n``` html\n\u003cscript src=\"https://unpkg.com/scrollbooster@2/dist/scrollbooster.min.js\"\u003e\u003c/script\u003e\n```\n\n### Usage\n\nThe most simple setup with default settings:\n\n``` js\nimport ScrollBooster from 'scrollbooster';\n\nnew ScrollBooster({\n    viewport: document.querySelector('.viewport'),\n    scrollMode: 'transform'\n});\n```\n\nPlease note that in order to support IE11 you should replace arrow functions and string templates from code examples to supported equivalents or just use Babel.\n\n### Options\n\nOption | Type | Default | Description\n------ | ---- | ------- | -----------\nviewport | DOM Node | null | Content viewport element (required)\ncontent | DOM Node | viewport child element | Scrollable content element inside viewport\nscrollMode | String | undefined | Scroll technique - via CSS transform or natively. Could be 'transform' or 'native'\ndirection | String | 'all' | Scroll direction. Could be 'horizontal', 'vertical' or 'all'\nbounce | Boolean | true | Enables elastic bounce effect when hitting viewport borders\ntextSelection | Boolean | false | Enables text selection inside viewport\ninputsFocus | Boolean | true | Enables focus for elements: 'input', 'textarea', 'button', 'select' and 'label'\npointerMode | String | 'all' | Specify pointer type. Supported values - 'touch' (scroll only on touch devices), 'mouse' (scroll only on desktop), 'all' (mobile and desktop)\nfriction | Number | 0.05 | Scroll friction factor - how fast scrolling stops after pointer release\nbounceForce | Number | 0.1 | Elastic bounce effect factor\nemulateScroll | Boolean | false | Enables mouse wheel/trackpad emulation inside viewport\npreventDefaultOnEmulateScroll | String | false | Prevents horizontal or vertical default when `emulateScroll` is enabled (eg. useful to prevent horizontal trackpad gestures while enabling vertical scrolling). Could be 'horizontal' or 'vertical'.\nlockScrollOnDragDirection | String | false | Detect drag direction and either prevent default `mousedown`/`touchstart` event or lock content scroll. Could be 'horizontal', 'vertical' or 'all'\ndragDirectionTolerance | Number | 40 | Tolerance for horizontal or vertical drag detection\nonUpdate | Function | noop | Handler function to perform actual scrolling. Receives scrolling state object with coordinates\nonClick | Function | noop | Click handler function. Here you can, for example, prevent default event for click on links. Receives object with scrolling metrics and event object. Calls after each `click` in scrollable area\nonPointerDown | Function | noop | `mousedown`/`touchstart` events handler\nonPointerUp | Function | noop | `mouseup`/`touchend` events handler\nonPointerMove | Function | noop | `mousemove`/`touchmove` events handler\nonWheel | Function | noop | `wheel` event handler\nshouldScroll | Function | noop | Function to permit or disable scrolling. Receives object with scrolling state and event object. Calls on `pointerdown` (mousedown, touchstart) in scrollable area. You can return `true` or `false` to enable or disable scrolling\n\n### List of methods\n\nMethod | Description\n------ | -----------\nsetPosition | Sets new scroll position in viewport. Receives an object with properties `x` and `y`\nscrollTo | Smooth scroll to position in viewport. Receives an object with properties `x` and `y`\nupdateMetrics | Forces to recalculate elements metrics. Useful for cases when content in scrollable area change its size dynamically\nupdateOptions | Sets option value. All properties from `Options` config object are supported\ngetState | Returns current scroll state in a same format as `onUpdate`\ndestroy | Removes all instance's event listeners\n\n### Full Example\n\n``` js\nconst viewport = document.querySelector('.viewport');\nconst content = document.querySelector('.scrollable-content');\n\nconst sb = new ScrollBooster({\n  viewport,\n  content,\n  bounce: true,\n  textSelection: false,\n  emulateScroll: true,\n  onUpdate: (state) =\u003e {\n    // state contains useful metrics: position, dragOffset, dragAngle, isDragging, isMoving, borderCollision\n    // you can control scroll rendering manually without 'scrollMethod' option:\n    content.style.transform = `translate(\n      ${-state.position.x}px,\n      ${-state.position.y}px\n    )`;\n  },\n  shouldScroll: (state, event) =\u003e {\n    // disable scroll if clicked on button\n    const isButton = event.target.nodeName.toLowerCase() === 'button';\n    return !isButton;\n  },\n  onClick: (state, event, isTouchDevice) =\u003e {\n    // prevent default link event\n    const isLink = event.target.nodeName.toLowerCase() === 'link';\n    if (isLink) {\n      event.preventDefault();\n    }\n  }\n});\n\n// methods usage examples:\nsb.updateMetrics();\nsb.scrollTo({ x: 100, y: 100 });\nsb.updateOptions({ emulateScroll: false });\nsb.destroy();\n```\n\n### [Live ScrollBooster Examples On CodeSandbox](https://codesandbox.io/s/scrollbooster-examples-3g00p)\n\n### Browser support\n\nScrollBooster has been tested in IE 11, Edge and other modern browsers (Chrome, Firefox, Safari).\n\n### Special thanks\n\nDavid DeSandro for his talk [\"Practical UI Physics\"](https://www.youtube.com/watch?v=90oMnMFozEE).\n\n### License\n\nMIT License (c) Ilya Shubin\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filyashubin%2Fscrollbooster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Filyashubin%2Fscrollbooster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filyashubin%2Fscrollbooster/lists"}