如果超出可见屏幕，如何找到我的下拉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即可正常工作

Answer 2

英语已经足够残破了，所以我无法解读您到底想要什么，所以我假设您想滚动到该下拉列表的底部？

在您发布的屏幕截图中，我可以看到页面滚动条位于顶部附近，我认为下拉菜单会垂直拉伸页面，因此页面的末端实际上是可见的。

在这两个假设下，最简单的解决方案是针对下拉菜单中的最后一个选项并滚动到该选项。

el.scrollIntoView()是一个很好的解决方案，其中el是您要使用的DOM元素。

此处的文档中提供的选项说明：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

如果您在Angular4中拥有它，则可以通过var el = ang4ele.nativeElement

获得DOM元素。

由于代码不完整（仅显示模板部分），因此在发布之前很难对其进行测试以使其防弹。