html - 如果超出可见屏幕，如何找到我的下拉 div？

Question

我正在尝试在我的 Web 应用程序中使用 angular 4 实现自定义组合框下拉列表。

我已将此自定义组合框用作使用 div 的订单项列表中的字段之一。

在这里，我想在列表的最后一行打开下拉菜单，但它超出了窗口屏幕。 在页面底部打开组合框时，如何让用户自动看到完整的下拉菜单？

<div style="height: 56px; margin-left: 7px; min-width:220px" [style.width]="columnsHeaderWidth.division">
    <div style="width:180px; height: 56px; max-width:180px; cursor: pointer;">
        <combo-box [id]="'division-'+user.uuid" [userOption]="true" [isSelected]="false"
        [magicLabelHack]="'projectTypeLabel'"
        [includeMagicLabel]="false"
        bind-placeHolder="'Select division/group...'"
        icon="wizard:chevrondown"
        [source]="divisions" [selectedValue]="user.divisionId" (onSelected)="onChangeDivision($event,user,user.division.id)"
        [isIconItemList]="true" [itemListWidth]="'230px'"
        [changeStyle]="true"
        (click)="rowClick(user)" (onFocusVisible)="tabFocus($event, user)">
        </combo-box>
    </div>
</div>

快照:

Answer 1

使用带有一些普通 JS 计算的模板变量:

<div #div style="left: 500px;"></div>

<p *ngIf="div?.getBoundingClientRect().x + div?.getBoundingClientRect().width > totalWidth">
  The div is out of bounds
</p>

Stackblitz (更改 div 的 style.left 以查看它是否有效)