scrollElementToCenterOfContainer.ts

export function scrollToCenter(target: HTMLElement, container: HTMLElement): void {
  // Vertically center element in container
  container.scrollTop = verticalOffset(target, container) - (container.offsetHeight - target.offsetHeight) / 2;
}

function verticalOffset(target: HTMLElement, container: HTMLElement): number {
  const commonAncestor = commonContainer(target, container);
  const parent: HTMLElement = target.offsetParent as any;
  if(parent === commonAncestor) {
    return target.offsetTop;
  } else {
    return target.offsetTop + verticalOffset(parent, container);
  }
}

function commonContainer(a: HTMLElement, b: HTMLElement): HTMLElement {
  const aHierarchy = offsetHierarchy(a);
  const bHierarchy = offsetHierarchy(b);
  const commonParent = aHierarchy.find((el) => bHierarchy.indexOf(el) >= 0);
  return commonParent;
}

function offsetHierarchy(target: HTMLElement): HTMLElement[] {
  const parent: HTMLElement = target.offsetParent as any;
  if (parent) {
    return [
      target,
      ...offsetHierarchy(parent)
    ];
  } else {
    return [
      target
    ]
  };
}