Question

I’m trying to use JQM and iScroll 4 for a project and convert it to a native app with xCode.
I like to use iScroll because the header and footer must always be displayed.
The problem is, the scrolling part isn’t working, it creates the ‘scrolling-div’, but when I try to scroll in it, it just bounce back to the top.

Here is my HTML and JS

A simple HTML page:

<div data-role="page" class="pages" id="home">
    <div data-role="header">
        <a href="#"class="showMenu menuBtn" data-icon="grid" data-iconpos="notext">Menu</a>
        <h1>header</h1>
    </div>
    <div data-role="content">
        <div id="wrapper">
            <div id="slide-content">
                <h3>Slide Menu</h3>
                <ul data-role="listview">
                    <li><a href="#home">Scroll naar benenden
                        </a></li>
                            ... lots of <li>
                            <li><a href="#home">Scroll naar benenden
                        </a></li>
             </ul>
            </div>
        </div>
    </div>
    <div data-role="footer">
        <h1>footer</h1>
    </div>
</div>

JS:

var myScroll
function loaded() {
    myScroll = new iScroll('wrapper');
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);

If you need more info, ask and you will receive 🙂

Thanks

Answer 1

You could also use overthrow, albeit still experimental. It’s being developed by Filament/JQM, so I guess this will be the way to go since scrollview will not be supported any longer.

See here: http://filamentgroup.com/lab/overthrow/

and here: http://filamentgroup.github.com/Overthrow/