{"id":13469606,"url":"https://github.com/lucafalasco/scroll-snap","last_synced_at":"2025-05-14T10:07:35.749Z","repository":{"id":39354732,"uuid":"83804888","full_name":"lucafalasco/scroll-snap","owner":"lucafalasco","description":"↯ Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour","archived":false,"fork":false,"pushed_at":"2025-04-29T02:14:18.000Z","size":1135,"stargazers_count":839,"open_issues_count":9,"forks_count":30,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-13T17:49:45.742Z","etag":null,"topics":["scroll","scroll-events","scrolling","snap"],"latest_commit_sha":null,"homepage":"http://lucafalasco.github.io/scroll-snap/","language":"TypeScript","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/lucafalasco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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,"zenodo":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://paypal.me/lucafalasco"]}},"created_at":"2017-03-03T14:12:01.000Z","updated_at":"2025-05-12T10:46:18.000Z","dependencies_parsed_at":"2024-02-08T11:26:01.222Z","dependency_job_id":"73c3fa40-7359-4892-b447-9512079398fc","html_url":"https://github.com/lucafalasco/scroll-snap","commit_stats":{"total_commits":159,"total_committers":10,"mean_commits":15.9,"dds":0.4025157232704403,"last_synced_commit":"d3a376b56ec3e56234dfa5fc55b98550a699737e"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucafalasco%2Fscroll-snap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucafalasco%2Fscroll-snap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucafalasco%2Fscroll-snap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucafalasco%2Fscroll-snap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucafalasco","download_url":"https://codeload.github.com/lucafalasco/scroll-snap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254119954,"owners_count":22017952,"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":["scroll","scroll-events","scrolling","snap"],"created_at":"2024-07-31T15:01:46.601Z","updated_at":"2025-05-14T10:07:35.705Z","avatar_url":"https://github.com/lucafalasco.png","language":"TypeScript","funding_links":["https://paypal.me/lucafalasco"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/lucafalasco/scroll-snap/master/logo.svg?sanitize=true\" width=\"120px\"/\u003e\n  \u003ch3 align=\"center\"\u003e\u003ccode\u003escroll-snap\u003c/code\u003e\u003c/h3\u003e\n\u003c/p\u003e\n\n---\n\n[![npm](https://img.shields.io/badge/npm-scroll--snap-red.svg?style=for-the-badge\u0026logo=npm)](https://www.npmjs.com/package/scroll-snap)\n[![npm](https://img.shields.io/npm/v/scroll-snap.svg?style=for-the-badge\u0026label)](https://www.npmjs.com/scroll-snap)\n[![npm downloads](https://img.shields.io/npm/dm/scroll-snap.svg?style=for-the-badge)](https://www.npmjs.com/package/scroll-snap)\n\n#### Overview\n\n`scroll-snap` is a powerful yet lightweight TypeScript library that provides smooth and customizable page snapping functionality. \nBuilt as a modern implementation of [CSS Scroll Snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap).\n\n#### Features\n\n- 🪶 Lightweight (~2KB gzipped)\n- 🌐 Cross-browser support\n- 💪 Zero dependencies\n- 🎯 TypeScript ready\n- ⚡ Smooth animations\n- 🎨 Customizable settings\n- ⌨️ Keyboard navigation support\n- 🖱️ Optional navigation arrows\n\n#### Installation\n\n```bash\nyarn add scroll-snap\n```\n\n#### Basic Usage\n\n```typescript\nimport createScrollSnap from 'scroll-snap'\n\nconst element = document.getElementById('container')\nconst { bind, unbind } = createScrollSnap(element, {\n  snapDestinationY: '100%',\n})\n```\n\n#### React Usage\n\nCheck out the [React Hooks demo](https://codesandbox.io/p/sandbox/scroll-snap-react-hooks-pppv8w) to see how to integrate scroll-snap in a React application.\n\n#### Configuration Options\n\n| Option           | Type                  | Default | Description                                    |\n| ---------------- | --------------------- | ------- | ---------------------------------------------- |\n| snapDestinationX | string \\| number      | -       | Horizontal snap points (e.g., '100%', '500px') |\n| snapDestinationY | string \\| number      | -       | Vertical snap points (e.g., '100%', '500px')   |\n| timeout          | number                | 100     | Delay before snapping after scroll ends (ms)   |\n| duration         | number                | 300     | Animation duration (ms)                        |\n| threshold        | number                | 0.2     | Scroll distance threshold (0 to 1)             |\n| snapStop         | boolean               | false   | Prevents skipping intermediate snap positions  |\n| showArrows       | boolean               | false   | Shows navigation arrows when hovering          |\n| enableKeyboard   | boolean               | true    | Enables keyboard arrow keys navigation         |\n| easing           | (t: number) =\u003e number | linear  | Animation easing function                      |\n\n#### Examples\n\n##### Vertical Snapping\n\n```typescript\nconst scrollSnap = createScrollSnap(element, {\n  snapDestinationY: '100vh',\n  duration: 300,\n  easing: t =\u003e t \u003c 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t\n})\n```\n\n##### Horizontal Scrolling Gallery\n\n```typescript\nconst scrollSnap = createScrollSnap(element, {\n  snapDestinationX: '100%',\n  showArrows: true,\n  enableKeyboard: true\n})\n```\n\n##### Custom Threshold\n\n```typescript\nconst scrollSnap = createScrollSnap(element, {\n  snapDestinationY: '50vh',\n  threshold: 0.4, // Requires more scroll distance to trigger snap\n})\n```\n\n#### API Reference\n\n##### Methods\n\n##### `bind()`\nEnables scroll snapping and attaches event listeners.\n\n##### `unbind()`\nDisables scroll snapping and removes event listeners.\n\n#### Development\n\n```bash\n# Clone the repository\ngit clone https://github.com/lucafalasco/scroll-snap.git\ncd scroll-snap\n\n# Install dependencies\nyarn\n\n# Start development server\nyarn start\n\n# Run unit tests\nyarn test\n\n# Run e2e tests\nyarn test:e2e\n\n# Build for production\nyarn build\n```\n\nThe dev server will start at `http://localhost:8080` with hot reloading enabled and a playground environment for testing.\n\n#### Contributing\n\n1. Fork the repository\n2. Create your feature branch: `git checkout -b feature/my-feature`\n3. Commit your changes: `git commit -am 'Add my feature'`\n4. Push to the branch: `git push origin feature/my-feature`\n5. Submit a pull request\n\n#### Browser Support\n\n- Chrome 61+\n- Firefox 63+\n- Safari 11+\n- Edge 79+\n\n#### License\n\nMIT © [Luca Falasco](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucafalasco%2Fscroll-snap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucafalasco%2Fscroll-snap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucafalasco%2Fscroll-snap/lists"}