fastlion-amis/src/utils/offset.ts

一种MIS页面生成工具

/**
 * 修改自 https://github.com/react-bootstrap/dom-helpers/blob/master/src/offset.ts
 */


const getFirstScrollParentElement = (node: HTMLElement): HTMLElement => {
  const overFlowStyle = getComputedStyle(node).overflow // 超出展示的样式
  if (['auto', 'scroll'].includes(overFlowStyle)) return node // 如果是滚动样式直接返回
  if (!node.parentElement) return node // 如果没有父元素 直接返回
  return getFirstScrollParentElement(node.parentElement as any) // 递归执行
}

/**
 * Returns the offset of a given element, including top and left positions, width and height.
 *
 * @param node the element
 */
export default function offset(node: HTMLElement, toolScroll = false) {
  const doc = node?.ownerDocument;
  let box = { top: 0, left: 0, height: 0, width: 0 };
  const docElem = doc && doc.documentElement;
  const firstClostestNode = node ? getFirstScrollParentElement(node) : docElem // 获取最接近的滚动元素

  // Make sure it's not a disconnected DOM node
  if (!docElem || !docElem.contains(node)) return box;

  if (node.getBoundingClientRect !== undefined)
    box = node.getBoundingClientRect();

  // console.log('高度参数比较', firstClostestNode, node, box, box.top, firstClostestNode.scrollTop, box.top + firstClostestNode.scrollTop, docElem.scrollTop, docElem.clientTop)
  box = {
    top: box.top + (toolScroll ? 0 : firstClostestNode.scrollTop) - (docElem.clientTop || 0),
    left: box.left + (toolScroll ? 0 : firstClostestNode.scrollLeft) - (docElem.clientLeft || 0),
    width: box.width,
    height: box.height
  };

  return box;
}