如何相对于垂直滚动条水平溢出在ngx-virtual-scroller内部创建弹出窗口

问题描述

我有一个带有垂直虚拟滚动条的侧边栏。每当我将鼠标悬停在此滚动容器中的某个项目上时，就会显示一个弹出窗口，以提供有关该项目的更多信息（例如，在该容器中，名称会被省略，因为该容器不够宽，并且当用户将鼠标悬停在该项目上时，以全名显示）。当我使用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,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;
    ...
  }

带有虚拟滚动条的问题

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular overflow popover virtualscroll