Ich habe ein One Pager gebaut und bin derzeit um das Scrollen auf jedem Gerät zu deaktivieren, wenn das mobile Menü geöffnet ist.Disable Scroll auf einem Pager
Ich gebe dem Inhaltswrapper eine Klasse von .no-scrolling, wenn der Hamburgermenüknopf angeklickt wird. Diese Klasse hat die folgenden Stile:
.no-scrolling {
position: fixed;
overflow: hidden;
}
Das funktioniert gut auf Desktop-und mobilen (touch) Geräte, aber leider die Seite springt auf den ganz oben auf der Seite, wenn die Klasse aktiviert ist. Nun, ich verstehe, warum das passiert, aber ich kenne keine Abhilfe.
Wenn der Benutzer beispielsweise zur Hälfte der Seite geblättert hat und dann das Menü öffnet, sollte die Seite nicht nach oben springen, sondern genau an dieser Position bleiben.
Wie würden Sie das tun?
bearbeiten
Aufgrund eines Vorschlags von skyline3000, fügte ich eine Standard verhindern. Leider funktioniert dieser Code nicht so, wie er sollte. Auf meinem iPhone und auf meinem iPad (Pro) funktioniert es, aber auf meinem MacBook ist es nicht ...
Irgendetwas stimmt nicht damit?
function animateToggle(click, move) {
$('.hamburger-menu').on(click, function() {
// some code to add an overlay and animate the button
if (prevent === true) {
$('html').unbind(move).on(move, function() {
prevent = false;
});
}
else {
$('html').on(move, function(e){
e.preventDefault();
prevent = true;
});
}
var prevent = false;
});
} // animateToggle()
if (touchscreen === true) {
animateToggle('touchend', 'touchmove');
}
else if (touchscreen === false) {
animateToggle('click', 'mousemove')
}
Sie sollten in Betracht ziehen, Scroll-Ereignisse in JavaScript ordnungsgemäß zu blockieren. document.addEventListener ('scroll', Funktion (Ereignis) {event.preventDefault(); return;}, false). Sie können dies hinzufügen und entfernen, wenn das Menü geöffnet/geschlossen wird. – skyline3000
@ skyline3000 Ich dachte, dass man nicht auf einen defaultDefault zurücksetzen kann ?! – Sam94
Nun, Sie würden eine Funktion erstellen, um den preventDefault auszuführen, dann fügen Sie den Ereignis-Listener hinzu und entfernen ihn wie nötig: 'function preventDefault (event) {event.preventDefault(); } '... Wenn das Menü geöffnet wird, können Sie' document.addEventListener ('scroll', preventDefault, false); 'und wenn das Menü' 'document.removeEventListener ('scroll', preventDefault, false) schließt;' Siehe eine meiner anderen (etwas) verwandten Antworten: http://stackoverflow.com/questions/7488336/re-enabling-touchmove-eventlistener-iphone-app-with-phone-gap/7490418#7490418 – skyline3000