2

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

虚拟滚动条的问题

在此处输入图像描述

预期结果(与普通滚动容器一样) 在此处输入图像描述

4

0 回答 0