iNoBounce

iNoBounce

Stop your iOS webapp from bouncing around when scrolling

The problem

You'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.

The solution

Now that we have overscroll-behavior, iNoBounce is no longer required.

Simply do something like this:

html, body {
  overscroll-behavior: none;
}

The old solution

No dependencies, no configuration, just include iNoBounce.

Example

All you need is an element with height or max-height, overflow: auto and -webkit-overflow-scrolling: touch.

    
List Item 1

    
List Item 2

    
List Item 3

    
List Item 4

    
List Item 5

    
List Item 6

    
List Item 7

    
List Item 8

    
List Item 9

    
List Item 10

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).

Shoutouts

How can I get that awesome iOS CSS skin from the app example?

Check out iOCSS for a lightweight and easy to use iOS skin for your mobile webapp.

Tapping stuff has a delay, what the heck?

You need FastClick by FT Labs.

Now I want awesome multi-touch gestures too!

It's hammer time, baby. Check out Hammer.js from Eight Media.

License

iNoBounce is licensed under the permissive BSD license.