javascript - 查找第一个可滚动的父级

Question

在这种情况下，我需要将一个元素滚动到视口(viewport)中。问题是我不知道哪个元素是可滚动的。例如，在 Portrait 中 body 是可滚动的，在 Landscape 中它是另一个元素(还有更多情况会改变可滚动元素)

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

我已经设置了一个演示 here .使用按钮，您可以在两种不同情况之间切换

<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);
  }
}