Verhindern eines & lt; input & gt; Element vom Scrollen des Bildschirms auf dem iPhone?

Ich habe mehrere <input type="number"> Elemente auf meiner Webseite. Ich bin mit jQTouch, und ich bin versucht zu bleiben Vollbild zu allen Zeiten; das ist, horizontales scrollen ist schlecht. Immer, wenn ich Sie ein <input> element, die Seite scrollt rechts, zeigt einen schwarzen Rand auf der rechten Seite des Bildschirms und de-Zentrierung alles. Die Eingänge offset von der linken Seite des Bildschirms, und Sie beginnen irgendwo in Richtung der Mitte der Seite.

Wie kann ich verhindern, dass das scrollen auf focus?

InformationsquelleAutor der Frage Stefan Kendall | 2010-06-01

  1. 15

    Fand ich die Lösung für dieses problem in diesem Beitrag Stop Seite scrollen von focus

    Fügen Sie einfach onFocus="window.scrollTo(0, 0);" auf Ihre Eingabe-Feld ein und Sie sind fertig!
    (Versucht es mit <textarea> und <input type="text" /> auf dem iPad, aber ich bin mir ziemlich sicher, es wird funktionieren auf dem iPhone auch.)

    Ich hatte Angst, die scrollen sichtbar sein würde, wie ein flimmern oder so, aber das ist glücklicherweise nicht der Fall!

    InformationsquelleAutor der Antwort Mischa Magyar

  2. 7

    hier ist, wie ich dies Problem gelöst auf dem iPhone (mobile Safari) (ich verwendet jQuery)

    1) erstellen Sie eine Globale variable, die hält die aktuelle scroll-position und die ist jedes mal aktualisiert, wenn der Benutzer führt einen Bildlauf im viewport

    var currentScrollPosition = 0;
$(document).scroll(function(){
    currentScrollPosition = $(this).scrollTop();
});

    2) binden Sie das focus-Ereignis des Eingabefeldes in Frage. wenn konzentriert, haben das Dokument scrollen, um die aktuelle position

    $(".input_selector").focus(function(){
    $(document).scrollTop(currentScrollPosition);
});

    Ta Da! Kein lästiges "Blättern im Fokus"

    Einer Sache im Auge zu behalten...stellen Sie sicher, dass das Eingabefeld ÜBER die Tastatur, sonst blenden Sie das Feld. Werden können, leicht gemildert durch das hinzufügen einer if-Klausel.

    InformationsquelleAutor der Antwort Maurice

  3. 3

    Ich würde empfehlen die Verwendung von jQuery.animieren () - Methode im Zusammenhang mit obennicht nur die Fenster.scrollTo(0,0), da iOS animiert die Seite offset-Eigenschaften, wenn ein input-element fokussiert ist. Aufruf-Fenster.scrollTo() nur einmal funktioniert möglicherweise nicht mit dem Zeitpunkt dieser native animation.

    Für mehr hintergrund, iOS wird die Animation der pageXOffset und pageYOffset Eigenschaften window. Sie können eine bedingte Prüfung auf diese Eigenschaften reagieren, wenn das Fenster hat sich verschoben:

    if(window.pageXOffset != 0 || window.pageYOffset != 0) {
  //handle window offset here
}

    So, zur Erweiterung auf den oben genannten link, das wäre ein vollständigeres Beispiel:

    $('input,select').bind('focus',function(e) { 
  $('html, body').animate({scrollTop:0,scrollLeft:0}, 'slow'); 
});

    InformationsquelleAutor der Antwort cacheflowe

  4. 0

    Wenn der Fokus eingestellt wird programmgesteuert, das ist, was ich tun würde:

    Speichern das Fenster scollTop Wert vor der änderung des Fokus. Dann wieder die scrollTop auf den gespeicherten Wert sofort nach Einstellung von Fokus.

    Wenn die Verwendung von jQuery:

    var savedScrollTop = $(document).scrollTop(); //save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); //restore it

    InformationsquelleAutor der Antwort Himanshu P

  5. -4

    Versuchen, diese, ich denke, das problem ist der zoom:

    <meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

    InformationsquelleAutor der Antwort user3255427

Schreibe einen Kommentar