focus-pro/dist/OnBoarding/getMaskStyle.js

focus-pro 中台前端组件库

export var getMaskStyle = function getMaskStyle(element, container) {
  if (!element) {
    return {};
  }
  // 获取目标元素的宽高和距离（相对于视口）
  var _element$getBoundingC = element.getBoundingClientRect(),
    height = _element$getBoundingC.height,
    width = _element$getBoundingC.width,
    left = _element$getBoundingC.left,
    top = _element$getBoundingC.top;
  // 获取容器的位移值，当容器为根元素时位移值均为0
  var _container$getBoundin = container.getBoundingClientRect(),
    containerLeft = _container$getBoundin.left,
    containerTop = _container$getBoundin.top;

  // 计算元素在容器中的绝对位置：实际Top = 垂直滚动量+可视区域的top
  var elementTopWithScroll = container.scrollTop + top;
  var elementLeftWithScroll = container.scrollLeft + left;
  // 元素不为html根元素时，需要减去指定的容器的相对于视口的位移值，以调整border
  if (container !== document.documentElement) {
    elementTopWithScroll -= containerTop;
    elementLeftWithScroll -= containerLeft;
  }
  console.log(' document.documentElement', containerTop, top);

  // 设置遮罩层的宽高和边框
  return {
    width: container.scrollWidth,
    // 这里的width和height是包括了border的宽高，所以样式里设置了border-box
    height: container.scrollHeight,
    borderTopWidth: Math.max(elementTopWithScroll, 0),
    borderLeftWidth: Math.max(elementLeftWithScroll, 0),
    borderBottomWidth: Math.max(container.scrollHeight - height - elementTopWithScroll, 0),
    borderRightWidth: Math.max(container.scrollWidth - width - elementLeftWithScroll, 0)
  };
};