滚动到 flexbox 容器中的元素

Posted 2023-03-10

【中文标题】滚动到 flexbox 容器中的元素

【英文标题】：Scroll to element in flexbox container

【发布时间】：2016-07-24 15:39:22

【问题描述】：

我正在尝试自动。

<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 标签以获得更多关注。

【参考方案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。由于它是弯曲的，我真的不知道如何抵消。

嗨，请参阅上面我编辑的答案。希望这对你有用。