Stop your iOS webapp from bouncing around when scrolling
npm install inobounceYou've built a nice full-screen mobile webapp, complete with scrollable elements using the -webkit-overflow-scrolling property. Everything is great, however, when you scroll to the top or bottom of your scrollable element, the window exhibits rubber band-like behavior, revealing a gray tweed pattern. Sometimes, your scrollable element doesn't scroll at all, but the window still insists on bouncing around.
No dependencies, no configuration, just include iNoBounce.
``html`
All you need is an element with height or max-height, overflow: auto and -webkit-overflow-scrolling: touch.
`html
See the
examples/ folder for more examples, including a full-screen list, a canvas drawing app, and a fully skinned iOS-style app.
API
Loading
inobounce.js will define the iNoBounce namespace. If the loading environment supports AMD, iNoBounce will register itself as a model and forgo defining the namespace.
* iNoBounce.enable()
Enable iNoBounce. It's enabled by default on platforms that support
-webkit-overflow-scrolling, so you only need to call this method if you explicitly disable it or want to enable it on a platform that doesn't support -webkit-overflow-scrolling.* iNoBounce.disable()
Disable iNoBounce.
* iNoBounce.isEnabled()
Returns a boolean indicating if iNoBounce is enabled.
* iNoBounce.isScrollSupported
A boolean value that indicates if the
-webkit-overflow-scrolling css property is valid, effectively a browser detection flag.Will it break my app that uses touch events like other solutions?
It shouldn't. iNoBounce includes an example of a canvas drawing app and has been used in conjunction with [Hammer.js] without affecting functionality.
How does it work?
iNoBounce detects if the browser supports
-webkit-overflow-scrolling by checking for the property on a fresh CSSStyleDeclaration. If it does, iNoBounce will listen to touchmove and selectively preventDefault() on move events that don't occur on a child of an element with -webkit-overflow-scrolling: touch set. In addition, iNoBounce will preventDefault()` when the user is attemping to scroll past the bounds of a scrollable element, preventing rubberbanding on the element itself (an unavoidable caveat).Check out [iOCSS] for a lightweight and easy to use iOS skin for your mobile webapp.
You need [FastClick] by [FT Labs].
It's hammer time, baby. Check out [Hammer.js] from [Eight Media].
iNoBounce is licensed under the permissive BSD license.
[iOCSS]: http://lazd.github.io/iOCSS/
[FastClick]: https://github.com/ftlabs/fastclick
[FT Labs]: http://labs.ft.com/
[Hammer.js]: http://eightmedia.github.io/hammer.js/
[Eight Media]: http://www.eight.nl/