3.14.22 • Published 5 years ago

postcss-momentum-scrolling

Licence

MIT

Version

3.14.22

Deps

Size

14 kB

Vulns

Weekly

Stars

Summary Dependency Versions

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

With and without -webkit-overflow-scrolling: touch

Live demo, YouTube demo

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;
}