滚动到flexbox容器中的元素

Question

我正在尝试自动滚动到flexbox容器中的元素。

<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");
      });
    }
  }
});

它滚动到单击的第一个项目的顶部，但之后滚动很难。我在非Flexbox容器中有一些非常相似的东西。

这是一个插件：

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

有什么想法吗？

Answer 1

使用offsetTop属性捕获嵌入（非根）DOM元素的滚动值，如flexbox。好的讨论here。我减去10来阻止div被切断，按你的意愿去做。

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

Working Plunker

修改

要处理标题或其他元素，不管是否为flexbox，只需从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