Wondering what’s next for npm?Check out our public roadmap! »

    postcss-momentum-scrolling

    3.10.19 • Public • Published

    PostCSS Momentum Scrolling

    npm Build Status npm

    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

    Other PostCSS plugins

    Install

    npm i postcss-momentum-scrolling

    DownloadsWeekly Downloads

    4,046

    Version

    3.10.19

    License

    MIT

    Unpacked Size

    13 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar