{"id":42830369,"url":"https://github.com/wide/scroll","last_synced_at":"2026-01-30T11:26:56.401Z","repository":{"id":43840171,"uuid":"267885656","full_name":"wide/scroll","owner":"wide","description":"Observe scroll progression and provides helpers for parallax, locking and sticky effects.","archived":false,"fork":false,"pushed_at":"2022-02-16T14:18:25.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-09-28T03:53:39.497Z","etag":null,"topics":["modulus"],"latest_commit_sha":null,"homepage":null,"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/wide.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}},"created_at":"2020-05-29T15:00:57.000Z","updated_at":"2022-02-16T14:16:10.000Z","dependencies_parsed_at":"2022-08-31T21:10:21.641Z","dependency_job_id":null,"html_url":"https://github.com/wide/scroll","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/wide/scroll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fscroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fscroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fscroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fscroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wide","download_url":"https://codeload.github.com/wide/scroll/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fscroll/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28911821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T08:15:08.179Z","status":"ssl_error","status_checked_at":"2026-01-30T08:14:31.507Z","response_time":66,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["modulus"],"created_at":"2026-01-30T11:26:55.704Z","updated_at":"2026-01-30T11:26:56.394Z","avatar_url":"https://github.com/wide.png","language":"JavaScript","readme":"# Scroll\r\n\r\nObserve scroll progression and provides helpers for parallax, locking and sticky effects.\r\n- [Usage](#usage)\r\n- [Events](#events)\r\n- [Scroll to](#scroll-to)\r\n- [Locker](#locker)\r\n- [Parallax](#parallax)\r\n- [Sticky](#sticky)\r\n\r\n\r\n## Install\r\n\r\n```\r\nnpm install @wide/scroll --save\r\n```\r\n\r\n\r\n## Usage\r\n\r\nInternally use [`uos`](https://www.npmjs.com/package/uos) library.\r\n\r\nInitialize scroll observer:\r\n```js\r\nimport '@wide/scroll'\r\n```\r\n\r\n\r\n## Events\r\n\r\n3 events `scroll`, `scroll.up` or `scroll.down` will be triggerd on each scroll step:\r\n```js\r\nimport emitter from '@wide/emitter'\r\n\r\nemitter.on('scroll', e =\u003e {\r\n  e.value // progress in px\r\n  e.progress // progress in %\r\n  e.up // scrolling up\r\n  e.down // scrolling down\r\n})\r\n\r\nemitter.on('scroll.up', e =\u003e {\r\n  e.value // progress in px\r\n  e.progress // progress in %\r\n})\r\n\r\n// or without emitter\r\ndocument.onEvent('scroll.up', e =\u003e {})\r\n```\r\n\r\nListen a specific range progression:\r\n```js\r\nimport { range } from '@wide/scroll'\r\n\r\nrange(300, 600, val =\u003e console.log(val)) // progress between 300px and 600px\r\n```\r\n\r\n\r\n## Scroll to\r\n\r\nInternally use [`jump.js`](https://www.npmjs.com/package/jump.js) library.\r\n\r\nListen jump link `[data-scrollto]` elements:\r\n```html\r\n\u003cdiv data-scrollto=\"#top\"\u003econtent\u003c/div\u003e\r\n```\r\n\r\nJump programmaticaly to an element:\r\n```js\r\nimport { scrollTo } from '@wide/scroll'\r\n\r\nscrollTo('.something')\r\n```\r\n\r\nYou can define global config applying to all links:\r\n```js\r\nimport { JUMP_CONFIG } from '@wide/scroll'\r\n\r\nJUMP_CONFIG.offset = -20 // top offset for all jump\r\n```\r\n\r\nYou can aslo define config locally by adding HTML attributes:\r\n```html\r\n\u003cbutton\r\n  data-scrollto=\"#footer\"\r\n  data-scrollto.duration=\"1010\"\r\n  data-scrollto.offset=\"0\"\r\n  data-scrollto.a11y=\"false\"\r\n  data-scrollto.callback=\"scrollToCallback\"\r\n  data-scrollto.easing=\"scrollToEasing\"\r\n\u003e\r\n  Scroll to footer\r\n\u003c/button\u003e\r\n```\r\n```js\r\nwindow.scrollToCallback = () =\u003e {\r\n  // Do some stuffs when scroll has been completed\r\n}\r\n\r\nwindow.scrollToEasing = () =\u003e {\r\n  // My custom easing animation code\r\n}\r\n```\r\n\r\n\u003e Note: Those parameters will override default (global) parameters.\r\n\r\n### Parameters\r\n| Name | Type | Description | Default value |\r\n|---|---|---|---|\r\n| `duration` | `number` | Pass the time the `scrollto()` takes, in milliseconds. | `800` |\r\n| `offset` | `number` | Offset a `scrollto()`, only if to an element, by a number of pixels. | `-80` |\r\n| `a11y` | `boolean` | If enabled, and scrolling to an element: add a tabindex to, and focus the element | `true` |\r\n| `callback` | `function` | Pass a function that will be called after the `scrollto()` has been completed. | `null` |\r\n| `easing` | `function` | Easing function used to transition the `scrollto()`. | `null` |\r\n\r\nMore informations on [`Jump.js` documentation](https://github.com/callmecavs/jump.js#options).\r\n\r\n## Locker\r\n\r\nInternally use [`body-scroll-lock`](https://www.npmjs.com/package/body-scroll-lock) library.\r\n\r\nLock page scroll, usefull when using a modal:\r\n```js\r\nimport { lock } from '@wide/scroll/lib/locker'\r\n\r\nlock(el) // pass an element to NOT lock, like the modal itself\r\n```\r\n\r\nAnd then unlock it:\r\n```js\r\nimport { unlock } from '@wide/scroll/lib/locker'\r\n\r\nunlock()\r\n```\r\n\r\nThese methods can be called through the event dispatcher:\r\n```js\r\nimport '@wide/scroll/lib/locker'\r\nimport { emit } from '@wide/emitter'\r\n\r\nemit('scroll.lock', el)\r\nemit('scroll.unlock')\r\n```\r\n\r\n\r\n## Parallax\r\n\r\nInternally use [`rellax`](https://www.npmjs.com/package/rellax) library.\r\n\r\nAdd parallax effect to `[data-parallax]` elements:\r\n```js\r\nimport '@wide/scroll/lib/parallax'\r\n```\r\n```html\r\n\u003cdiv data-parallax\u003econtent\u003c/div\u003e\r\n```\r\n\r\nOr for an horizontal effect:\r\n```html\r\n\u003cdiv data-parallax.x\u003econtent\u003c/div\u003e\r\n```\r\n\r\nThe moving speed can be customized (from `-10` to `10`):\r\n```html\r\n\u003cdiv data-parallax=\"4\"\u003econtent\u003c/div\u003e\r\n```\r\n\r\nAdd programmaticaly parallax effect to an element (see [rellax docs](https://www.npmjs.com/package/rellax) for all params):\r\n```js\r\nimport parallax from '@wide/scroll/lib/parallax'\r\n\r\nconst el = document.querySelector('.something')\r\nparallax(el, { speed: .4 })\r\n```\r\n\r\n## Sticky\r\n\r\nInternally use [`stickybits`](https://www.npmjs.com/package/stickybits) library.\r\n\r\nAdd sticky behavior to `[data-sticky]` elements:\r\n```js\r\nimport '@wide/scroll/lib/sticky'\r\n```\r\n```html\r\n\u003cdiv data-sticky\u003econtent\u003c/div\u003e\r\n```\r\n\r\nThe offset can be customized:\r\n- `[data-parallax.offset=\"20\"]` to set top offset (default `0`)\r\n\r\nAdd programmaticaly sticky effect to element:\r\n```js\r\nimport sticky from '@wide/scroll/lib/sticky'\r\n\r\nconst el = document.querySelector('.something')\r\nsticky(el, { offset: 20 })\r\n```\r\n\r\n\r\n## Libraries\r\n\r\nThis package uses :\r\n- [`uos`](https://www.npmjs.com/package/uos)\r\n- [`jump.js`](https://www.npmjs.com/package/jump.js)\r\n- [`body-scroll-lock`](https://www.npmjs.com/package/body-scroll-lock)\r\n- [`rellax`](https://www.npmjs.com/package/rellax)\r\n- [`stickybits`](https://www.npmjs.com/package/stickybits)\r\n\r\n\r\n## Authors\r\n\r\n- **Aymeric Assier** - [github.com/myeti](https://github.com/myeti)\r\n- **Julien Martins Da Costa** - [github.com/jdacosta](https://github.com/jdacosta)\r\n\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the [licence](licence) file for details","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwide%2Fscroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwide%2Fscroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwide%2Fscroll/lists"}