Jquery Mobile Menüpanel scrollen

Philipp88 · 04.02.2014

Hallo ihr

Ich sitze mal wieder vor einem Problem bei meiner mobilen Seite

Folgende Situation:

Im Header ist ein Button womit sich das Menü öffnet. Jetzt soll wenn das Menü geöffnet ist, das gesamte Fenster sich nicht mehr Scrollen lassen sondern nur das Menü selbst (z.b. wie spin.de). Nach stundenlanges probieren habe ich es bis jetzt noch nicht hinbekommen

Ich benutze jquery mobile und das Plugin Overthrw für das Scrollen eines Divs auf mobilen Geräten.
Ich habe mal eine einfache Seite in jsfiddle erstellt mit mein nicht funktionierenden Script

Bitte kostenlos registrieren, damit du die Links siehst.

Habt ihr eine Idee wie so etwas gehen könnte?

Würde mich riesig auf Antwort freuen

Danke im vorraus
Philipp

JPS · 07.02.2014

Ich weiß zwar nicht genau was Du willst, weil ich auch dieses spin.de nicht kenne.
Veranlasse doch einfach mal, dass das auslösende Event was das Menu aktiviert, entweder dem <body> tag oder dem <div id="page"> das css overflow: hidden mitzugeben, was Du beim Einklappen wieder rückgangig machst.

Philipp88 · 09.02.2014

Ich hatte schon probiert Overflow hidden den Body zu geben. Leider versteckt er da nur den Scrollbalken aber das Scrollen geht immer noch (mausrad oder touch auf mobile)

Ich habe auch schon probiert den Body das touchmove-Event auf false zu setzen, leider Scrollt das Menü dann auch nicht mehr

Habt ihr noch eine Idee?

JPS · 09.02.2014

Versuch dich halt mal mit so etwas:

HTML:

<script>
$('#page').bind('touchmove',function(e){
e.preventDefault();
});
</script>