iPad Flimmern beim automatischen Scrollen mit JQuery und Scrollto-Plugin

Lesezeit: 4 Minuten

Benutzer-Avatar
Shadi Almosri

Ich habe ein etwas seltsames Problem mit der iOS-Plattform für eine Seite, die ich entwickle. Dies ist die betreffende Seite. Wenn Sie auf eines der Fallstudienbilder klicken, blendet die Seite zuerst die erforderliche Fallstudie ein und scrollt dann zu ihr.

Dies funktioniert auf allen Desktop-Browsern unter Windows und Mac, aber auf dem iPhone und iPad bekommen Sie ein schreckliches Flackern, wenn es nach unten scrollt.

Nicht ganz sicher, wie Sie dieses Problem debuggen oder beheben können.

Irgendwelche Ideen wären eine große Hilfe!

Vielen Dank im Voraus, Shadi

AKTUALISIERUNG 1

Die neuste Seite ist zu finden hier. Ich habe immer noch keine Lösung gefunden – wenn jemand eine Idee hat, wäre es erstaunlich!

  • Autsch. Gerade auf meinem iPad-Simulator getestet und ich kann sehen, was du meinst …

    – Fred

    26. November 2010 um 0:54 Uhr

  • Vielleicht sollte auf iPhone/iPad-Geräten das Click()-Ereignis durch das Touch-Ereignis ersetzt werden? Ich bin mir nicht sicher, nur eine Idee. Ich denke, dass das Klickereignis auf Touch-Geräten länger dauert, um es vom Doppelklick (Touch) zu unterscheiden.

    – Krešimir Prcela

    1. Dezember 2010 um 13:52 Uhr


  • Prcela ist korrekt, Klickereignisse sollten ignoriert und stattdessen touchstart oder touchend verwendet werden. Die Verwendung von Klickereignissen lässt die Benutzeroberfläche träge erscheinen und hat mit der Doubletap-Erkennung zu tun. Wenn der Benutzer den Bildschirm berührt, wird das Ereignis „touchstart“ ausgelöst und ein 300-ms-Countdown beginnt. Wenn der Benutzer seinen Finger loslässt, bevor dieser Timer abgelaufen ist, wartet er, bis dieser Timer abgelaufen ist, um das „Klick“-Ereignis zu senden. Wenn der Benutzer seinen Finger gedrückt hält, bis der 300-ms-Timer abgelaufen ist, wird das Click-Ereignis gesendet, sobald er loslässt.

    – Bobbi

    17. August 2012 um 0:42 Uhr

Benutzer-Avatar
wsbrs

Wenn Sie nur vertikales Scrollen benötigen, können Sie verwenden {'axis':'y'} als Einstellungen für die scrollTo-Methode.

$.scrollTo(*selector*, *time*, {'axis':'y'});

  • Das hat es für mich behoben, iPhone 4.

    – sind

    10. Oktober 2011 um 22:24 Uhr

  • dies ist auch mit iOS7 und dem neuesten scrollTo-Plugin immer noch notwendig (und funktioniert).

    – Simon_Weaver

    25. Mai 2014 um 1:08 Uhr

  • Beachten Sie, dass es nach Version 2.0 wahrscheinlich nicht mehr benötigt wird

    – Ariel Flesler

    27. April 2015 um 11:28 Uhr

Hast du das versucht:

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

Wenn Sie die Seite nur vertikal scrollen, können Sie das gesamte jQuery scrollTo-Plugin durch diese einfache Zeile ersetzen:

$('html,body').animate({scrollTop: $("#scrollingTo").offset().top}, 1000, 'easeOutCubic');

Ich persönlich mache so etwas

$('html,body').animate({scrollTop: $("#step-1").offset().top-15}, 1000, 'easeOutCubic',function(){
  //do stuff
});

Ich habe festgestellt, dass, wenn ich versuche, andere js-Arbeiten zu erledigen, während es scrollt, der Browser knirscht und die Animation nicht flüssig ist. Aber wenn Sie den Rückruf verwenden, wird er zuerst scrollen und dann tun, was Sie brauchen.

Ich habe eine -15 an das Ende von .top gesetzt, weil ich den oberen Rand des div, das ich gescrollt habe, einfach aus ästhetischen Gründen zeigen wollte. 1000 ist die Dauer der Animation in Millisekunden.

Gutschrift geht an das Poster, animiert, für den Tipp.

Die Definition von {‘axis’:’y’} hat es richtig gemacht! Es hat mir mit SlideUp/Down-Flackern geholfen.

Benutzer-Avatar
dubbelj

Ich bin mir nicht sicher, ob dies für Jquery-Animationen gilt. Aber das Folgende scheint sich auf CSS-Animationen auszuwirken.

http://css-infos.net/property/-webkit-backface-visibility

Syntax

-webkit-backface-visibility: visibility;

Parameter

Sichtbarkeit Legt fest, ob die Rückseite eines transformierten Elements sichtbar ist oder nicht. Der Standardwert ist sichtbar.

bearbeiten

Versuchen Sie es auf jedes Element anzuwenden und sehen Sie, was passiert.

*{
 -webkit-backface-visibility: visible;
}

und versuche

*{
-webkit-backface-visibility: hidden;
}

Es ist wirklich nur eine Vermutung…

  • Ich bin mir nicht sicher. Ich würde damit beginnen, die Option auf alles anzuwenden. Um zu sehen, was es tut.

    – dubbelj

    2. Dezember 2010 um 10:34 Uhr

  • Danke @dubbelj für diesen Vorschlag aus heiterem Himmel. Übrigens behebt es das Flackern der Textwiedergabemethode, wenn Übergänge ins Spiel kommen, wie auf operadiperoni.com zu sehen ist. Anwenden als hidden zwingt es, kontinuierlich in der etwas dünneren Gewichtung zu rendern.

    – Barney

    11. September 2012 um 14:12 Uhr

Benutzer-Avatar
Brad M

Ich werde auch bestätigen, dass die Methode von Tund Do einwandfrei funktioniert. Wenn Sie eine “links / rechts” -Variante derselben Sache benötigen (wie ich), hier ist sie:

$('.pg6').click(function(){
    var target = $('#page6');
    if (target.length)
    {
        var left = target.offset().left;
        $('html,body').animate({scrollLeft: left}, 1000);
        return false;
    }
});

Ich würde vermuten, Sie könnten die beiden kombinieren, die oberste Position einnehmen und die Animationen auch für eine “links / rechts / oben / unten” -Animation verketten.

  • Ich bin mir nicht sicher. Ich würde damit beginnen, die Option auf alles anzuwenden. Um zu sehen, was es tut.

    – dubbelj

    2. Dezember 2010 um 10:34 Uhr

  • Danke @dubbelj für diesen Vorschlag aus heiterem Himmel. Übrigens behebt es das Flackern der Textwiedergabemethode, wenn Übergänge ins Spiel kommen, wie auf operadiperoni.com zu sehen ist. Anwenden als hidden zwingt es, kontinuierlich in der etwas dünneren Gewichtung zu rendern.

    – Barney

    11. September 2012 um 14:12 Uhr

Benutzer-Avatar
animieren

Ich hatte das gleiche Problem.

Das Problem ist das ScrollTo-Plugin. Anstelle von scrollto.js verwenden Sie einfach .animate mit scrollTop. Kein Flackern mehr im iPad/iPhone.

Hier ohne Flackern http://www.sneakermatic.com

1186500cookie-checkiPad Flimmern beim automatischen Scrollen mit JQuery und Scrollto-Plugin

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy