PostCSS Momentum Scrolling

April 24, 2023 · View on GitHub

PostCSS plugin for adding momentum style scrolling behavior (-webkit-overflow-scrolling:touch) for elements with overflow (scroll, auto) on iOS.

Example

/* Input example */
.minicart {
  overflow: scroll;
}

/* Output example */
.minicart {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

Live Example

With and without -webkit-overflow-scrolling: touch

Live demo, YouTube demo

🔗 Links:

Getting Started

First thing's, install the module:

npm install postcss-momentum-scrolling --save-dev

🍳 Usage

Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you already use PostCSS, add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-momentum-scrolling')([
+     // example options
+     'hidden',
+     'scroll',
+     'auto',
+     'inherit'
+   ]),
    require('autoprefixer')
  ]
}

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

🍰 Options

If the passed options are not an Array, then the default options will be set.

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).

Custom options example

postcss([
  require('postcss-momentum-scrolling')([
    'hidden',
    'inherit'
  ])
])

/* Before */
header {
  overflow: hidden;
}

main {
  overflow: scroll;
}

footer {
  overflow: inherit;
}

/* After */
header {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

main {
  overflow: scroll;
}

footer {
  overflow: inherit;
  -webkit-overflow-scrolling: touch;
}

Changelog

See Releases history

License

MIT