如何解决如何相对于垂直滚动条水平溢出在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 举报,一经查实,本站将立刻删除。