フレックスボックスコンテナの要素にスクロール

Question

フレックスボックスコンテナの要素に自動スクロールしようとしています。

<div class="nav"> 
    <div class="items"> 
    <div ng-repeat="i in items" scroll-on-click> 
     {{i}} click me to scroll to me! 
    </div> 
    </div> 
</div> 

app.directive('scrollOnClick', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, $element) { 
     $element.on('click', function() { 
     $(".items").animate({scrollTop: $element.offset().top}, "slow"); 
     }); 
    } 
    } 
}); 

クリックされた最初の項目の上にスクロールしますが、その後はスクロールが困難です。私は非フレックスボックスコンテナで動作するものと非常によく似たものを持っています。

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

任意のアイデア：ここ

はplunkありますか？

Answer 1

フレキシボックスのような埋め込まれた（非ルート）DOM要素のスクロール値をキャプチャするoffsetTopプロパティを使用します。良い議論here。私はdivsが中止されるのを止めるために10を引いています。

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

Working Plunker

EDIT：

ヘッダまたは他の要素、フレキシボックスを処理するためか、単にscrollToからの高さを減算（ヘッダにIDを割り当てる）：

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

    }, "slow"); 

Working Plunker