滚动到 flexbox 容器中的元素答案

【问题标题】：Scroll to element in flexbox container滚动到 flexbox 容器中的元素
【发布时间】：2023-04-05 08:46:01
【问题描述】：

我正在尝试自动滚动到 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

有什么想法吗？

【问题讨论】：

发生在所有浏览器上？ Chrome 似乎运行良好。
Chrome 不适用于我。当我单击元素时，它们并不总是滚动到顶部。好像如果我从列表顶部开始，它将正确滚动。但是，如果我在列表的中间，就没有那么多了。
考虑添加 Javascript、jQuery 和 CSS 标签以获得更多关注。

标签： javascript css angularjs flexbox autoscroll

【解决方案1】：

使用offsetTop 属性来捕获嵌入（非根）DOM 元素的滚动值，例如弹性框。很好的讨论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

【讨论】：

效果好一点。但是，如果我在滚动上方有弹性内容，我仍然会遇到问题。请参阅更新的 plunker：plnkr.co/edit/kq40NiTqBI81KlRJBLHu?p=preview。由于它是弯曲的，我真的不知道如何抵消。
嗨，请参阅上面我编辑的答案。希望这对你有用。