PostCSS Momentum Scrolling

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

Live demo, YouTube demo

🔗 Links:

• MDN
• Momentum Scrolling on iOS Overflow Elements
• Six things I learnt about iOS Safari's rubber band scrolling

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

Other PostCSS plugins

• postcss-sort-media-queries - plugin for combine and sort CSS media queries with mobile first or desktop first methods