{"id":18886200,"url":"https://github.com/lieutenantpeacock/fluidscroll","last_synced_at":"2025-09-01T01:09:00.554Z","repository":{"id":144578227,"uuid":"382971101","full_name":"LieutenantPeacock/FluidScroll","owner":"LieutenantPeacock","description":"A cross-browser compatible, lightweight, easy-to-use library for smooth scrolling!","archived":false,"fork":false,"pushed_at":"2024-11-03T11:10:41.000Z","size":41,"stargazers_count":27,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-22T21:27:02.027Z","etag":null,"topics":["javascript","scroll","scrolling","smooth-scrolling","smoothscroll"],"latest_commit_sha":null,"homepage":"","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/LieutenantPeacock.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2021-07-05T00:00:55.000Z","updated_at":"2025-05-19T09:32:05.000Z","dependencies_parsed_at":"2024-11-03T12:18:19.569Z","dependency_job_id":"32b5e9eb-9f57-4584-924a-55949bb7a8a8","html_url":"https://github.com/LieutenantPeacock/FluidScroll","commit_stats":null,"previous_names":["lieutenantpeacock/fluidscroll","lieutenantpeacock/smoothscroll"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/LieutenantPeacock/FluidScroll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LieutenantPeacock%2FFluidScroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LieutenantPeacock%2FFluidScroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LieutenantPeacock%2FFluidScroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LieutenantPeacock%2FFluidScroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LieutenantPeacock","download_url":"https://codeload.github.com/LieutenantPeacock/FluidScroll/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LieutenantPeacock%2FFluidScroll/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273061075,"owners_count":25038596,"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-08-31T02:00:09.071Z","response_time":79,"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":["javascript","scroll","scrolling","smooth-scrolling","smoothscroll"],"created_at":"2024-11-08T07:25:43.285Z","updated_at":"2025-09-01T01:09:00.503Z","avatar_url":"https://github.com/LieutenantPeacock.png","language":"JavaScript","readme":"# FluidScroll\n\nA cross-browser compatible, lightweight, easy-to-use library for smooth scrolling.\n\n```js\nfluidScroll({ options });\n```\n\n## Installation\n\nThis library can be installed with NPM.\n\n```bash\nnpm i fluidscroll\n```\n\nThen, it may be used in this manner:\n\n```js\n// ES Module\nimport { fluidScroll } from 'fluidscroll';\n\n// CommonJS\nconst fluidScroll = require('fluidscroll');\n```\n\nAlternatively, it can be directly included as a script on any HTML page. For example, with a CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/fluidscroll@2.0.0\" integrity=\"sha384-ZvfwaJZFftLPOaPS13spccPYdWRcrfz/GDgUYAf7b6I2OBXY74KiAC6WVg0XF3Qq\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\nYou can also manually download [dist/fluidscroll.umd.min.js](dist/fluidscroll.umd.min.js) and include it in the head of the page using your own path:\n\n```html\n\u003cscript src=\"path/to/fluidscroll.min.js\"\u003e\u003c/script\u003e\n```\n\nIt can additionally be used in a module script:\n\n```html\n\u003cscript type=\"module\"\u003e\n    import { fluidScroll } from 'https://cdn.jsdelivr.net/npm/fluidscroll@2.0.0/dist/fluidscroll.esm.mjs';\n\u003c/script\u003e\n```\n\nImport maps can furthermore be used to simplify the module specifier when importing as well as check the integrity.\n\n```html\n\u003cscript type=\"importmap\"\u003e\n    {\n        \"imports\": {\n            \"fluidscroll\": \"https://cdn.jsdelivr.net/npm/fluidscroll@2.0.0/dist/fluidscroll.esm.mjs\"\n        },\n        \"integrity\": {\n            \"https://cdn.jsdelivr.net/npm/fluidscroll@2.0.0/dist/fluidscroll.esm.mjs\": \"sha384-uRZwvJLM1xS19wbYkR8/uqMLzM58mVHEluImXjOaBV4H3LerGAjCSGbQfBYrpNCQ\"\n        }\n    }\n\u003c/script\u003e\n\u003cscript type=\"module\"\u003e\n    import { fluidScroll } from 'fluidscroll';\n\u003c/script\u003e\n```\n\n## Simple Uses\n\nScroll to y-position 1000px in 750 milliseconds:\n\n```js\nfluidScroll({yPos: 1000, duration: 750});\n```\n\nScroll to the bottom of the page:\n\n```js\nfluidScroll({yPos: 'end'});\n```\n\nScroll to x-position 500px and y-position 500px:\n\n```js\nfluidScroll({xPos: 500, yPos: 500});\n```\n\n\n## Options\n\n\u003ctable\u003e\n\t\u003ctr\u003e\u003cth\u003eOption\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003cth\u003eDefault\u003c/th\u003e\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eyPos\u003c/td\u003e\n\t\t\u003ctd\u003eThe y-position to scroll to. If specified as a number, it is an absolute number of pixels\n\t\tfrom the top. It can also be specified as a relative amount from the current position.\n\t\tIt can also be the special string values \u003ccode\u003e\"start\"\u003c/code\u003e (the top of the scrolling area),\n\t\t\u003ccode\u003e\"center\"\u003c/code\u003e (the middle of the scrolling area),\n\t\tand \u003ccode\u003e\"end\"\u003c/code\u003e (the bottom of the scrolling area).\n\t\tA relative number of pixels is specified as a string prefixed with + (to scroll down \n\t\ta certain number of pixels) or - (to scroll up a certain number of pixels), \n\t\te.g. \u003ccode\u003e'+100'\u003c/code\u003e, \u003ccode\u003e'-50'\u003c/code\u003e.\n\t\tA relative percentage is specified by further adding the % symbol to the end of the string,\n\t\twhich indicates scrolling by a percentage of the entire height, e.g. \u003ccode\u003e'+10%'\u003c/code\u003e, \u003ccode\u003e'-15%'\u003c/code\u003e.\u003c/td\u003e\n\t\t\u003ctd\u003eNo default.\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003exPos\u003c/td\u003e\n\t\t\u003ctd\u003eThe x-position to scroll to. If specified as a number, it is an absolute number of pixels\n\t\tfrom the left. It can also be specified as a relative amount from the current position.\n\t\tIt can also be the special string values \u003ccode\u003e\"start\"\u003c/code\u003e (the left of the scrolling area),\n\t\t\u003ccode\u003e\"center\"\u003c/code\u003e (the middle of the scrolling area),\n\t\tand \u003ccode\u003e\"end\"\u003c/code\u003e (the right of the scrolling area).\n\t\tA relative number of pixels is specified as a string prefixed with + (to scroll down \n\t\ta certain number of pixels) or - (to scroll up a certain number of pixels), \n\t\te.g. \u003ccode\u003e'+100'\u003c/code\u003e, \u003ccode\u003e'-50'\u003c/code\u003e.\n\t\tA relative percentage is specified by further adding the % symbol to the end of the string,\n\t\twhich indicates scrolling by a percentage of the entire width, e.g. \u003ccode\u003e'+10%'\u003c/code\u003e, \u003ccode\u003e'-15%'\u003c/code\u003e.\u003c/td\u003e\n\t\t\u003ctd\u003eNo default.\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eduration\u003c/td\u003e\n\t\t\u003ctd\u003eThe amount of time the scrolling takes (in milliseconds).\u003c/td\u003e\n\t\t\u003ctd\u003e\u003ccode\u003e500\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003escrollingElement\u003c/td\u003e\n\t\t\u003ctd\u003eThe HTML element to scroll instead of the window.\u003c/td\u003e\n\t\t\u003ctd\u003eNo default.\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003etoElement\u003c/td\u003e\n\t\t\u003ctd\u003eThe HTML element to scroll to. This option overrides the \n\t\t\u003ccode\u003exPos\u003c/code\u003e and \u003ccode\u003eyPos\u003c/code\u003e options.\u003c/td\u003e\n\t\t\u003ctd\u003eNo default.\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003epreventUserScroll\u003c/td\u003e\n\t\t\u003ctd\u003ePrevent the user from scrolling during the smooth scroll animation.\u003c/td\u003e\n\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eeasing\u003c/td\u003e\n\t\t\u003ctd\u003eThe easing function. It can either be a string that is the name of one of the\n\t\tpredefined easing functions (in \u003ccode\u003efluidScroll.easing\u003c/code\u003e), or a function\n\t\tthat accepts the percentage of time that has passed (in its decimal form, between 0 and 1)\n\t\tand returns the percentage of the scrolling distance to scroll to at the current time\n\t\t(as a number between 0 and 1).\u003c/td\u003e\n\t\t\u003ctd\u003e\u003ccode\u003e'linear'\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003ecomplete\u003c/td\u003e\n\t\t\u003ctd\u003eThe callback function to invoke when the smooth scrolling is complete.\u003c/td\u003e\n\t\t\u003ctd\u003eNo default.\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003efirstAxis\u003c/td\u003e\n\t\t\u003ctd\u003eThe first axis to scroll if changing both the x- and y-positions.\n\t\tThere are two possible values: \u003ccode\u003e'x'\u003c/code\u003e and \u003ccode\u003e'y'\u003c/code\u003e.\n\t\tIf not specified, both axes will scroll at the same time.\n\t\t\u003c/td\u003e\n\t\t\u003ctd\u003e\n\t\tNo default.\n\t\t\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003escrollEvents\u003c/td\u003e\n\t\t\u003ctd\u003e\n\t\tAn array of strings indicating the names of events that will stop the scrolling animation\n\t\tif the \u003ccode\u003epreventUserScroll\u003c/code\u003e option is set to \u003ccode\u003efalse\u003c/code\u003e.\n\t\t\u003c/td\u003e\n\t\t\u003ctd\u003e\n\t\t\t\u003ccode\u003e['scroll', 'mousedown', 'wheel', 'DOMMouseScroll', 'mousewheel', 'touchmove']\u003c/code\u003e\n\t\t\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003escrollKeys\u003c/td\u003e\n\t\t\u003ctd\u003eAn array of integer key codes represent the keys that will stop the scrolling\n\t\tanimation when pressed by the user \n\t\tif the \u003ccode\u003epreventUserScroll\u003c/code\u003e option is set to \u003ccode\u003efalse\u003c/code\u003e.\n\t\t\u003c/td\u003e\n\t\t\u003ctd\u003e\u003ccode\u003e[37, 38, 39, 40, 32]\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eblock\u003c/td\u003e\n\t\t\u003ctd\u003eThe position of the element of the element to scroll to \n\t\t(specified by the \u003ccode\u003etoElement\u003c/code\u003e option) relative to the top of the container.\n\t\tThe value can be \u003ccode\u003e\"start\"\u003c/code\u003e (the top of the element is aligned to the top of the visible area),\n\t\t\u003ccode\u003e\"center\"\u003c/code\u003e (the element is in the vertical center of the visible area),\n\t\t\u003ccode\u003e\"end\"\u003c/code\u003e (the bottom of the element is aligned with the bottom of the visible area),\n\t\tor a string indicating the percentage, e.g. \u003ccode\u003e'50%'\u003c/code\u003e.\n\t\tIf not specified, it is the same as \u003ccode\u003e\"start\"\u003c/code\u003e.\n\t\t\u003c/td\u003e\n\t\t\u003ctd\u003eNo default.\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003einline\u003c/td\u003e\n\t\t\u003ctd\u003eThe position of the element of the element to scroll to \n\t\t(specified by the \u003ccode\u003etoElement\u003c/code\u003e option) relative to the left of the container.\n\t\tThe value can be \u003ccode\u003e\"start\"\u003c/code\u003e (the left of the element is aligned to the left of the visible area),\n\t\t\u003ccode\u003e\"center\"\u003c/code\u003e (the element is in the horizontal center of the visible area),\n\t\t\u003ccode\u003e\"end\"\u003c/code\u003e (the right of the element is aligned with the right of the visible area),\n\t\tor a string indicating the percentage, e.g. \u003ccode\u003e'50%'\u003c/code\u003e.\n\t\tIf not specified, it is the same as \u003ccode\u003e\"start\"\u003c/code\u003e.\u003c/td\u003e\n\t\t\u003ctd\u003eNo default.\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eallowAnimationOverlap\u003c/td\u003e\n\t\t\u003ctd\u003eA boolean value indicating whether or not multiple simultaneous animations are\n\t\tallowed on the same container.\u003c/td\u003e\n\t\t\u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003epaddingTop\u003c/td\u003e\n\t\t\u003ctd\u003eA certain number of pixels to add to the y-position to scroll to.\n\t\tIf not specified, it is the same as \u003ccode\u003e0\u003c/code\u003e.\u003c/td\u003e\n\t\t\u003ctd\u003eNo default.\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003epaddingLeft\u003c/td\u003e\n\t\t\u003ctd\u003eA certain number of pixels to add to the x-position to scroll to.\n\t\tIf not specified, it is the same as \u003ccode\u003e0\u003c/code\u003e.\u003c/td\u003e\n\t\t\u003ctd\u003eNo default.\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\n## Return Value\n\n`fluidScroll` returns an object with the `destroy` property which is a function that stops\nthe scrolling when called.\n\n```js\nvar s = fluidScroll({yPos: 5000, duration: 3000});\n// Stop the scrolling sometime later\ns.destroy();\n```\n\n## Instantiation\n\nUsing the `new` operator will create an instance with the passed in options as defaults. Properties\nspecified in this options object will override the original defaults. Call the `fluidScroll` method on\nthe returned value to perform smooth scrolling with these defaults.\n\n```js\nvar scroller = new fluidScroll({duration: 700, block: 'center'});\nscroller.fluidScroll({yPos: 500}); // duration is 700 (rather than the original default of 500)\n```\n\n## Getting and Setting Global Defaults\n\n`fluidScroll.defaults()` returns an object containing the default values for each option.\n\u003cbr\u003e\nPassing an object to `fluidScroll.defaults` will overwrite each option in the defaults with \nthe value from that object if it is set.\n\n```js\nfluidScroll.defaults({duration: 700}); // set default duration to 700ms\n```\n\n## Other Methods and Properties\n\n`fluidScroll.stopAll()` stops all current scroll animations and returns `true`/`false` depending\non whether there were running animations that were stopped.\n\n`fluidScroll.scrolling()` returns `true`/`false` depending on whether or not there are current scrolling\nanimations.\n\n`fluidScroll.nativeSupported` indicates whether or not the CSS `scroll-behavior` property is supported\nin the current browser.\n\n`fluidScroll.easing` is an object containing the predefined easing functions.\n\n## Examples\n\nExamples of common use cases can be found in the [examples](examples) folder. These can be run by cloning the repository, then opening any of the HTML files in a browser. Note that many newer JavaScript features are not used in order to demonstrate more cross-browser compatible code.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flieutenantpeacock%2Ffluidscroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flieutenantpeacock%2Ffluidscroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flieutenantpeacock%2Ffluidscroll/lists"}