最初のスクロール可能な親を探す

質問

ある要素をビューポートにスクロールさせなければならない状況があります。問題は、どの要素がスクロール可能であるかがわからないことです。例えば、ポートレートではボディがスクロール可能で、ランドスケープでは他の要素がスクロール可能です（そして、スクロール可能な要素を変更する状況はもっとあります）。

今問題なのは、ビューポートにスクロールさせる必要がある要素がある場合、その最初のスクロール可能な親要素を見つける最良の方法は何でしょうか？

私はデモをセットアップしました。 ここで . このボタンで、2つの異なる状況を切り換えることができます。

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

本文はスクロール可能か .outer

何か提案はありますか？

どのように解決するのですか？

スクロールバーが表示されているかどうかを確認し、表示されていない場合は、親を探します。

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

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