Scrollen zu Element im Flexbox-Container

Question

Ich versuche, automatisch zu einem Element in einem Flexbox-Container zu scrollen.

Es scrollt an den Anfang des ersten geklickt, aber danach hat es eine harte Zeit Scrollen. Ich hatte etwas sehr ähnliches in einem Nicht-Flexbox-Container. Hier

ist ein zupfen:

http://plnkr.co/edit/kq40NiTqBI81KlRJBLHu?p=preview

Irgendwelche Ideen?

Answer 1

Verwenden Sie die Eigenschaft offsetTop, um den Bildlaufwert von eingebetteten DOM-Elementen (nicht als Stammverzeichnis) wie eine Flexbox zu erfassen. Gute Diskussion here. Ich subtrahiere 10, um zu verhindern, dass die Divs abgeschnitten werden, tun Sie, was Sie wollen.

$(".items").animate({scrollTop: $element.prop('offsetTop') - 10}, "slow"); 

Working Plunker

EDIT:

Um einen Header oder ein anderes Element Griff, FlexBox oder nicht, subtrahieren nur seine Höhe von scrollTo (eine ID in den Header Zuordnung):

$(".items") 
    .animate(
    { 
     scrollTop: $('#' + id).prop('offsetTop') - 
     document.getElementById('header').offsetHeight - 
     10 // Store this as a .constant if it won't change 

    }, "slow"); 

Working Plunker