Javascript 滚动到flexbox容器中的元素

我正在尝试自动克隆到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");
      });
    }
  }
});

{{i}单击我滚动到我！
app.directive（'scrollOnClick'，function（）{
返回{
限制：“A”，
链接：功能（范围，$element）{
$element.on（'click'，function（）{
$（“.items”）.animate（{scrollTop:$element.offset（）.top}，“slow”）；
});
}
}
});

它会滚动到单击的第一个项目的顶部，但之后很难滚动。我在一个非flexbox容器中也有类似的工作

下面是一个例子：

---

有什么想法吗？

使用

offsetTop

属性捕获嵌入（非根）DOM元素的滚动值，如flexbox。很好的讨论。我减去10是为了防止div被切断，随你的便

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

编辑：

要处理标题或其他元素（无论是否为flexbox），只需从scrollTo中减去其高度（为标题分配id）：

---

在所有浏览器上都会发生吗？Chrome似乎很好用。Chrome对我不起作用。单击元素时，它们并不总是滚动到顶部。似乎如果我从列表顶部开始，它将正确滚动。但是，如果我在列表的中间，不要太多。考虑添加JavaScript、jQuery和CSS标签以引起更多的注意。然而，如果我的卷轴上有弹性的内容，我仍然有问题。请参阅更新的plunker:。由于它的弹性，我真的不知道如何抵消。嗨，请看我上面编辑的答案。希望这对你有用。

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

    }, "slow");