Question

当 div 的位置大于窗口时，我在定位出现的 div 时遇到问题。

我的 div 根据选定的文本占据位置。但如果这是在页面底部，div 就会出现，我需要滚动才能看到它。

我以为我在做的是检查窗口的最大大小，如果我们接近或大于此大小，请将 div 放在选择上方。同样，如果选择靠近页面右侧，我希望它更偏向左侧。

  openAdder(selection) {
    this.showAdder = true;
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();
    this.menuPosition.y = rect.bottom;
    this.menuPosition.x = rect.left;
  }

HTML 组件

<div class="adder-annotation" [ngStyle]="{'left.px': menuPosition.x, 'top.px':menuPosition.y}">
    <div class="adder-toolbar" *ngIf="showAdder">
        <div class="annotator-option annotate" (click)="openCreation('annotate')">
            <span>{{'annotate' | translate}}</span>
        </div>
        <div class="annotator-optionhighlight"  (click)="openCreation('highlight')">
            <span>{{'highlight' | translate}}</span>
        </div>
        <ng-container *ngIf="annoType === 'highlight' then createHighlight"></ng-container>
    </div>
    <ng-container *ngIf="annoType === 'annotate' then createAnnotation"></ng-container>
</div>

有没有人有解决这个问题的简单方法？

如何根据窗口大小动态定位 div？

0 个答案: