JQuery Mobile scrollable list inside position:fixed element? (Sencha Touch behavior)

Question

A typical use case would be a page with two columns:

The standard behavior in JQuery Mobile is the content scrolls together with page. Is it possible to build an app with JQM using a different paradigm - a fixed viewport with scrollable content?

Answer 1

You could use Overthrow plus the splitview or multiview plugin.

I'm developing multiview, so yes, you could use this plugin (still work-in-progress) to set up a layout like this, which also adapts nicely to smaller tablets and smartphones. I recently switched to using overflow. Before, I used scrollview, which is no longer supported by JQM.

Both scrollview and overthrow get "in trouble" with heavy element sections. For example, if I put a listview form with multiple criteria into the scrollable menu, things tend to slow down considerably. Then again, Overthrow is 0.1, so let's see what happens with it.

With either plugin you would have to tweak some of the plugin code to make the right hand section "fix-height" (see functions backpageheight and panelHeight in multiview).

Also, both plugins modify JQM itself. I'm currently trying to go without tampering JQM, but it will take a while.

Let me know, if you need a quick demo page.