mobile Navigation Scrollbar machen (Mobile Devices)

DiDiJo

Erfahrenes Mitglied
Hi Leute,

ich baue gerade eine Mobile Webseite mit Hilfe von jquery Mobile auf.

Meine Seite besteht nur aus einer "data-role='page'" ... den header und Footer kann ich mir sparen, da ich die Navigationestrukturen anders aufbauen möchte ... ansonsten wäre es aber auch kein Problem, die 2 Elemente noch hinzuzufügen ... das ist aber gerade nicht mein Problem.

Mein Problem ist folgendes. Ich habe ein DIV was immer die verfügbare Höhe des Browser-Fensters hat. In diesem DIV habe ich nun eine Navigation mit einer <ul> Liste aufgebaut.
Das ganze sieht so aus:
PHP:
<div id="navigation" style="overflow:scroll;">                	
    <div id="logo"></div>
    <div id="naviSwipeElement">
        <div id="naviOverflow">
            <ul id="naviList">
            	<li><a href="">Navipunkt 1</a></li>
                <li><a href="">Navipunkt 2</a></li>
                <li><a href="">Navipunkt 3</a></li>
                <li><a href="">Navipunkt 4</a></li>
                [... etc ...] 
            </ul>	                       
        </div>
    </div>
</div>

Nun möchte ich, dass ich innerhalb der #navigation so scrollen kann, wie beispielsweise in meinem Telefonkontakten. Wenn ich den Finger langsam über den Bildschirm fahre scrolle ich langsam ... wenn ich schneller mit dem Finger wische, so scrolle ich auch schneller. Aktuell scrollt er nur sehr rucklig und nicht wirklich "smooth" (iPhone 3/4) ... auf einem Galaxy S2 wird das DIV gar nicht erst angezeigt.

Kann mir einer erklären, wie ich ein solches srollbares DIV für Mobile Endgeräte aufbauen muss. Gibt es dafür vlt. ein jQuery PlugIn ?!
 

Neue Beiträge

Zurück