滚动到 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 属性来捕获嵌入的 (non-root) DOM 元素的滚动值，如 flexbox。很好的讨论 here。我正在减去10以防止div被切断，按你的意愿做。

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

Working Plunker

编辑：

要处理 header 或其他元素，无论是否为 flexbox，只需从 scrollTo 中减去其高度（为 header 分配一个 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

滚动到 flexbox 容器中的元素

Scroll to element in flexbox container

javascript

css

angularjs

flexbox

autoscroll