查找第一个可滚动的父级

Question

在这种情况下，需要将元素滚动到视口中。问题是我不知道哪个元素是可滚动的。例如，在“纵向”中，身体是可滚动的，在“横向”中，身体是其他的元素（还有更多情况会更改可滚动的元素）

现在的问题是，给定需要滚动到视口中的元素，找到其第一个可滚动父级的最佳方法是什么？

我在这里设置了一个演示。使用按钮，您可以在两种不同情况之间切换

<div class="outer">
    <div class="inner">
        <div class="content"> 
            ...
            <span>Scroll me into view</span>
        </div>
    </div>
</div>

主体可以滚动或 .outer

有什么建议么 ？

Answer 1

只需检查滚动条是否可见，如果看不到父级。

function getScrollParent(node) {
  if (node == null) {
    return null;
  }

  if (node.scrollHeight > node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}