@angular/cdk/overlay/position小结

PositionStrategy 位置策略

export interface PositionStrategy {
  /** Attaches this position strategy to an overlay. */
  attach(overlayRef: OverlayRef): void;

  /** Updates the position of the overlay element. */
  apply(): void;

  /** Called when the overlay is detached. */
  detach?(): void;

  /** Cleans up any DOM modifications made by the position strategy, if necessary. */
  dispose(): void;
}

OverlayPositionBuilder 位置策略创建者

// 获取全局定位
global(): GlobalPositionStrategy;
// 创建flexible定位
flexibleConnectedTo(elementRef: ElementRef | HTMLElement): FlexibleConnectedPositionStrategy;

GlobalPositionStrategy 全局

// 上右下左 宽高 水平，垂直
top().right().bottom().left().width().height().centerHorizontally().centerVertically()

FlexibleConnectedPositionStrategy flexible

isElementScrolledOutsideView 是否在滚出试图范围内

export function isElementScrolledOutsideView(element: ClientRect, scrollContainers: ClientRect[]) {
  return scrollContainers.some(containerBounds => {
    const outsideAbove = element.bottom < containerBounds.top;
    const outsideBelow = element.top > containerBounds.bottom;
    const outsideLeft = element.right < containerBounds.left;
    const outsideRight = element.left > containerBounds.right;

    return outsideAbove || outsideBelow || outsideLeft || outsideRight;
  });
}

isElementClippedByScrolling 是否被剪切

export function isElementClippedByScrolling(element: ClientRect, scrollContainers: ClientRect[]) {
  return scrollContainers.some(scrollContainerRect => {
    const clippedAbove = element.top < scrollContainerRect.top;
    const clippedBelow = element.bottom > scrollContainerRect.bottom;
    const clippedLeft = element.left < scrollContainerRect.left;
    const clippedRight = element.right > scrollContainerRect.right;

    return clippedAbove || clippedBelow || clippedLeft || clippedRight;
  });
}