讓DOM元素自動滾到視野內ScrollIntoView

概述

項目中須要把一個DOM元素自動滾動到視野內，百思不得其解，最後再element庫裏面發現了這個方法，記錄下來供之後開發時參考，相信對其餘人也有用。
參考資料：element scroll-into-view.js

代碼

代碼以下：

/* eslint-disable no-param-reassign */
export default function scrollIntoView(container, selected) {
  if (!selected) {
    container.scrollTop = 0;
    return;
  }

  const offsetParents = [];
  let pointer = selected.offsetParent;
  while (pointer && container !== pointer && container.contains(pointer)) {
    offsetParents.push(pointer);
    pointer = pointer.offsetParent;
  }
  const top = selected.offsetTop + offsetParents.reduce((prev, curr) => (prev + curr.offsetTop), 0);
  const bottom = top + selected.offsetHeight;
  const viewRectTop = container.scrollTop;
  const viewRectBottom = viewRectTop + container.clientHeight;

  if (top < viewRectTop) {
    container.scrollTop = top;
  } else if (bottom > viewRectBottom) {
    container.scrollTop = bottom - container.clientHeight;
  }
}