A tiny, no-frills, framework-independent, targeted overflow: auto polyfill for use in responsive design.
What is this all about?
You want to use CSS overflow in your designs, but overflow doesn't work properly in many browsers, particularly mobile ones. Many popular mobile browsers treat overflow: auto the same as overflow: hidden, cropping overflow content from view, and leaving users no way to access it.
But wait - many browsers actually support overflow very well! In particular, desktop browsers tend to support it without a hitch, and many of the latest versions of most mobile platforms do too. The trouble is, it's hard – perhaps impossible – to test for overflow support, and even if we could use it safely where supported, many popular browsers lack that support and would be left with a degraded experience.
What is Overthrow?
Overthrow is a conservative attempt at filling the gaps in overflow support, with an emphasis on letting native implementations do their thing, and in touch-supporting browsers, providing a very minimal polyfill in browsers where native support is not available. Out of necessity, Overthrow examines the user agent string to whitelist the current and future versions of mobile platforms that are known to have native overflow support, but not before checking through more reliable and agnostic means: namely, iOS5's (and now Chrome Android's too!) touch scrolling CSS property, and a broad desktop browser inference test (no touch event support with a screen greater than 1200px wide).
First and foremost, Overthrow is designed to simply enable native CSS overflow in browsers it deems to have native support, but it includes a touch-scrolling polyfill too! In platforms that don't appear to support overflow natively, but do support touch events, Overthrow will polyfill the feature, allowing momentum-based scrolling in browsers that might otherwise be left with an innaccessible experience.
Perhaps most importantly, Overthrow enables overflow support as a qualified, progressive enhancement, meaning your content starts out uncropped and accessible, and properties like width and height are assigned only in browsers where overflow content can reliably be scrolled (either natively or with the polyfill). In browsers that don't support overflow natively, and also don't support touch events, the content will not receive dimensions at all, leaving users with a degraded but accessible experience.
A few example pages
The examples directory has some sample responsive layouts that use overthrow. If you're in a browser that supports overthrow, you'll find a link in the header to toggle it on and off, demonstrating the fallback experience for non-overflow browsers.
That's about it.
Here's some extra demo content to scroll through...
Example Embedded Overthrow Block
Note: this may be a little clunky at the moment, as nesting isn't quite finished. Check out the nesting branch for progress.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.