Light

yunusga / postcss-momentum-scrolling Goto Github PK

View Code? Open in Web Editor NEW

69.0 3.0 1.0 968 KB

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

Home Page: https://github.com/yunusga/postcss-momentum-scrolling

License: MIT License

JavaScript 65.91% CSS 34.09%

postcss css postcss-plugin momentum-scrolling ios-safari ios safari scroll momentum overflow

postcss-momentum-scrolling's Introduction

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:

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

Other PostCSS plugins

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

postcss-momentum-scrolling's People

Contributors

Stargazers

Watchers

Forkers

postcss-momentum-scrolling's Issues

Compatibility with PostCSS 8

Thanks for your PostCSS plugin!

As you probably know, PostCSS 8 was released a few days ago. It would be great if you could make this plugin compatible with the latest version. The creators of the project have even released this migration guide.

Dependabot can't resolve your JavaScript dependency files

Dependabot can't resolve your JavaScript dependency files.

As a result, Dependabot couldn't update your dependencies.

The error Dependabot encountered was:

Error whilst updating dependencies in package-lock.json:
Cannot read property 'match' of undefined

It looks like your lockfile has some corrupt entries with missing versions and needs to be re-generated.
You'll need to remove package-lock.json and node_modules before you run npm install.

If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.

View the update logs.

Dependabot can't resolve your JavaScript dependency files

Dependabot can't resolve your JavaScript dependency files.

As a result, Dependabot couldn't update your dependencies.

The error Dependabot encountered was:

Error whilst updating dependencies in package-lock.json:
Cannot read property 'match' of undefined

It looks like your lockfile has some corrupt entries with missing versions and needs to be re-generated.
You'll need to remove package-lock.json and node_modules before you run npm install.

If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.

View the update logs.

Improve docs

Hi. Thanks for this awesome plugin. We use it in our production.

We need input/output CSS example. It is useful even for this simple cases (because it is faster to understand by examples).
Add some example of momentum style. For example, GIF with before/after example will be extremly useful.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.