senchalabs/jQTouch — pull request #321 by beedesk (2011-11-11 07:49:48+00:00)
Title: Add support for -webkit-overflow-scroll

There were a few goals in my mind when I was making overflow-scroll support.

1) to support sticky .toolbar and .navibar
2) to use no JavaScript for layout, if possible
3) to minimize the needs for html change
4) to make it possible and easy to preserve existing behavior for any unsupported browser

Goal (1), (2) and (3) calls for the use of flexible-box model.
This patch introduces a new class "view". A page generally looks like the following:

<div id="jqt">
<div id="page1">
<div class="toolbar">...</div>
<div class="view">...</div>
<div class="footer navibar">...</div>
</div>
</div>

Previously, we didn't need "view" class because filled content will simply causes overflow.

Now, to enable scroll, the scrollable section must be wrapped in a single <div>.

Other peer content will take space first. Any leftover space will be grabbed by the "view" <div> because of box-flex.

To disable "overflow-scrolling" for the entire app, simply add "unfixed" to #jqt's <div>, ie,
<div id="jqt" class="unfixed">

To disable "overflow-scrolling" for a single page, simply add "unfixed" to page's <div>, ie,
<div id="jqt">
<div id="page1" class="unfixed"> ... </div>
</div>