JavaScript setTimeout verursacht ein scrollTop Event?

Question

Ich habe eine Sammlung von divs in einem Dokument, das gefiltert werden kann nach Klassenname, wie im Verstecken und Anzeigen von Elementen. Die Liste kann gefiltert werden, indem entweder auf ein entsprechendes Element in der Liste oder auf eines der Elemente im oberen Menü geklickt wird.

Ich machte this pen, um mein Problem zu veranschaulichen.

Ich rufe die Filterfunktion für jedes Klickereignis auf, die alle Elemente ausblenden, und nach der Verwendung von window.setTimeout() zeige ich die richtigen wie unten an. Dies ist sowohl um eine Verzögerung zu erhalten, als auch um Fade-In CSS3-Animationen auszulösen.

var filter = function(el){ 

    if(filterClass==='all'){ 
    window.setTimeout(function(){ 
     $('.project').show(); //show all projects 
     $('#filter-all').addClass('active'); 
    }, 100); 
    } 
    else{ 
    window.setTimeout(function(){ 
     $('.'+filterClass).show(); //show filtered projects 
     $('#back2').show(); 
     $('#'+elClassName).addClass('active'); 
    }, 100); 
    } 
}; 

Das Problem ist, dass wenn ich window.setTimeout() die Ansicht scrollt bis an die Spitze, auch wenn der Blick in den unteren Teil der Seite ist.

Versuchen Sie dies im Stift:

1. Alle anzeigen
2. Scroll bis auf den Boden, so dass die oberen Rand des Dokuments in der Ansicht nicht sichtbar ist.
3. Filter durch Klicken auf einige Div.

Ergebnis: Es wird richtig gefiltert, aber der Blick immer scrollt/springt auf die Spitze.

Warum passiert das?

Ich erwartete, dass es in der gleichen relativen Bildlaufansicht bleibt, wenn möglich und ansonsten am Ende der Bildlaufleiste endet. Dies ist für mich das Standard und gewünschte Verhalten.

Answer 1

Die Seite scrollt oben, weil Sie Elemente ausblenden. Es gibt also keinen abwärts scrollbaren Bereich mehr. Wenn du 1000 Gegenstände hättest und du 999 filterst und nur 1 zeigst, was würdest du erwarten? Der scrollbare Bereich wäre viel zu kurz.

Für Ihren Fall würde ich nur

$(".project").hide() 

Und verstecken nicht passenden Elemente entfernen:

else{ 
    window.setTimeout(function(){ 
     $('.'+filterClass).show(); 
     $(".project:not(" + '.' + filterClass + ')').hide(); 
     $('#back2').show(); 
     $('#'+elClassName).addClass('active'); 
    }, 100); 
    } 

keine perfekte Lösung, denn es gibt einige Scroll oben wäre. Aber in den meisten Fällen wäre es weniger.