css - 如何水平溢出相对于垂直滚动条的位置（在ngx-virtual-scroller中创建弹出窗口）

Question

我有一个带有垂直虚拟滚动的侧边栏。每当我将鼠标悬停在此滚动容器中的某个项目上时，就会出现一个弹出框，提供有关该项目的更多信息（例如，在容器中，名称被省略，因为容器不够宽，并且当用户将鼠标悬停在该项目上时，弹出框是以全名显示）。当我使用 ngx-virtual-scroller 时，弹出框会导致出现水平滚动条，并且弹出框被虚拟滚动条剪辑。

当我在一个普通的滚动容器中尝试这个时，这不会发生。

进一步调查表明，这与虚拟滚动条的相对定位有关，但我找不到解决方案……

你知道克服这个问题的方法吗？

<virtual-scroller #scroll [items]="items">
  <div *ngFor="let item of scroll.viewPortItems">
    <div class="reference" appHoverPopper [target]="tooltip">
      {{ item.name }}
    </div>

    <div class="popper" #tooltip>
      <span class="popper__arrow"></span>
      Hi, my name is {{item.name}}! I think I'm so amazing, don't you?
    </div>
  </div>
</virtual-scroller>

<div class="scroll-container">
  <div *ngFor="let item of items">
    <div class="reference" appHoverPopper [target]="tooltip">
      {{ item.name }}
    </div>
    <div class="popper" #tooltip>
      <span class="popper__arrow"></span>
      Hi, my name is {{item.name}}! I think I'm so amazing, don't you?
    </div>
  </div>
</div>

virtual-scroller {
    height: 200px;
    width: 300px;
}

.scroll-container {
    margin-top: 200px;
    height: 200px;
    width: 300px;
    overflow-y: auto;
}

.reference,
.popper {
    display: inline-block;
}
.popper {
    position: absolute;
    ...
  }

虚拟滚动条的问题

预期结果（与普通滚动容器一样）

标签： cssangularoverflowpopovervirtualscroll