{"id":15641687,"url":"https://github.com/yunusga/postcss-momentum-scrolling","last_synced_at":"2025-04-30T07:49:48.067Z","repository":{"id":34308309,"uuid":"107982492","full_name":"yunusga/postcss-momentum-scrolling","owner":"yunusga","description":"PostCSS plugin add 'momentum' style scrolling behavior (-webkit-overflow-scrolling: touch) for elements with overflow (scroll, auto) on iOS","archived":false,"fork":false,"pushed_at":"2023-07-18T20:15:20.000Z","size":968,"stargazers_count":69,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-30T07:49:42.802Z","etag":null,"topics":["css","inertia-scroll","ios","ios-safari","momentum","momentum-scrolling","overflow","postcss","postcss-plugin","safari","scroll","touch"],"latest_commit_sha":null,"homepage":"https://github.com/yunusga/postcss-momentum-scrolling","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/yunusga.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2017-10-23T12:59:51.000Z","updated_at":"2023-09-08T17:31:35.000Z","dependencies_parsed_at":"2024-06-18T18:38:29.433Z","dependency_job_id":"6eba5986-1b75-4c21-9398-92ae1d42101e","html_url":"https://github.com/yunusga/postcss-momentum-scrolling","commit_stats":null,"previous_names":["solversgroup/postcss-momentum-scrolling"],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusga%2Fpostcss-momentum-scrolling","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusga%2Fpostcss-momentum-scrolling/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusga%2Fpostcss-momentum-scrolling/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusga%2Fpostcss-momentum-scrolling/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yunusga","download_url":"https://codeload.github.com/yunusga/postcss-momentum-scrolling/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251666226,"owners_count":21624290,"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":["css","inertia-scroll","ios","ios-safari","momentum","momentum-scrolling","overflow","postcss","postcss-plugin","safari","scroll","touch"],"created_at":"2024-10-03T11:44:38.817Z","updated_at":"2025-04-30T07:49:48.044Z","avatar_url":"https://github.com/yunusga.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Momentum Scrolling\n\n[PostCSS]:          https://github.com/postcss/postcss\n[MIT]:              https://github.com/solversgroup/postcss-momentum-scrolling/LICENSE\n[official docs]:    https://github.com/postcss/postcss#usage\n[Releases history]: https://github.com/solversgroup/postcss-momentum-scrolling/CHANGELOG.md\n\n[![npm](https://img.shields.io/npm/v/postcss-momentum-scrolling.svg)](https://www.npmjs.com/package/postcss-momentum-scrolling)\n[![npm](https://img.shields.io/npm/dt/postcss-momentum-scrolling.svg)](https://www.npmjs.com/package/postcss-momentum-scrolling)\n\n[PostCSS] plugin for adding **momentum** style scrolling behavior (`-webkit-overflow-scrolling:touch`) for elements with overflow (scroll, auto) on iOS.\n\n## Example\n\n```css\n/* Input example */\n.minicart {\n  overflow: scroll;\n}\n```\n\n```css\n/* Output example */\n.minicart {\n  overflow: scroll;\n  -webkit-overflow-scrolling: touch;\n}\n```\n\n## Live Example\n\n![With and without -webkit-overflow-scrolling: touch](https://yunusga.github.io/img/postcss-momentum-scrolling.gif)\n\n[Live demo](https://dev.solvers.group/momentum/), [YouTube demo](https://www.youtube.com/watch?v=mYLSv7Il-D0)\n\n### 🔗 Links:\n\n - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling)\n - [Momentum Scrolling on iOS Overflow Elements](https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/)\n - [Six things I learnt about iOS Safari's rubber band scrolling](https://www.specialagentsqueaky.com/blog-post/ssy5i7qw/2015-06-10-six-things-i-learnt-about-ios-rubberband-overflow-scrolling/)\n\n## Getting Started\n\nFirst thing's, install the module:\n\n```\nnpm install postcss-momentum-scrolling --save-dev\n```\n\n## 🍳 Usage\n\nCheck you project for existed PostCSS config: `postcss.config.js`\nin the project root, `\"postcss\"` section in `package.json`\nor `postcss` in bundle config.\n\nIf you already use PostCSS, add the plugin to plugins list:\n\n```diff\nmodule.exports = {\n  plugins: [\n+   require('postcss-momentum-scrolling')([\n+     // example options\n+     'hidden',\n+     'scroll',\n+     'auto',\n+     'inherit'\n+   ]),\n    require('autoprefixer')\n  ]\n}\n```\n\nIf you do not use PostCSS, add it according to [official docs]\nand set this plugin in settings.\n\n## 🍰 Options\n\n\u003e If the passed options are not an `Array`, then the default options will be set.\n\n`Array` of `overflow` property values at which you want to add momentum style scrolling behavior. Default `['hidden', 'scroll', 'auto', 'inherit']` (use only `['scroll']` for minimize css size).\n\n### Custom options example\n\n```js\npostcss([\n  require('postcss-momentum-scrolling')([\n    'hidden',\n    'inherit'\n  ])\n])\n```\n\n```css\n/* Before */\nheader {\n  overflow: hidden;\n}\n\nmain {\n  overflow: scroll;\n}\n\nfooter {\n  overflow: inherit;\n}\n```\n\n```css\n/* After */\nheader {\n  overflow: hidden;\n  -webkit-overflow-scrolling: touch;\n}\n\nmain {\n  overflow: scroll;\n}\n\nfooter {\n  overflow: inherit;\n  -webkit-overflow-scrolling: touch;\n}\n```\n\n## Changelog\n\nSee [Releases history]\n\n## License\n\n[MIT]\n\n## Other PostCSS plugins\n\n- [`postcss-sort-media-queries`](https://github.com/yunusga/postcss-sort-media-queries) - plugin for combine and sort CSS media queries with **mobile first** or **desktop first** methods\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunusga%2Fpostcss-momentum-scrolling","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyunusga%2Fpostcss-momentum-scrolling","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunusga%2Fpostcss-momentum-scrolling/lists"}