溢出-y和位置：绝对导致滚动条不在顶部时的偏移

Question

以下是一个示例：https://jsfiddle.net/sunvom3a/

我有一个项目列表。

基本上是一个带有一些文本和下拉列表的容器。这个想法是当你将鼠标悬停在文本上时，下拉列表应该直接位于下方（kina就像工具提示一样）。

＆＃13;

＆＃13;

.container {
  overflow-y: scroll;
  height: 100px;
  border: solid 2px green;
}
.popup {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: absolute;
  display: none;
}
.item:hover .popup {
  display: block;
}

＆＃13;

<div class="container">
  <div class="item"><span> Text1</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text2</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text3</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text4</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text5</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text6</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text7</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text8</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text9</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text10</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text11</span>
    <div class="popup"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

适合overflow-y滚动条下方的前几个元素（我的分辨率是前5项）效果很好：

但其余部分被打破 - 当移动滚动条时，此偏移量将作为弹出窗口与文本之间的距离添加：

有没有办法获得列表中所有项目的一致行为？

Answer 1

这在Chrome和Edge中展示（Firefox按预期工作）。它是根据初始的视野外位置计算相对位置。

你需要添加这个......

.item{
  position: relative;
}

...使绝对定位的元素相对于悬停的物品定位。

小提琴：https://jsfiddle.net/sunvom3a/1/

上述解决方案的缺点是它将工具提示移动到容器内部，使其中的一部分可能不在视野范围内。另外，我不确定这是一个很棒的用户界面，因为你用工具提示覆盖了其他选项。我建议将它附加到容器的父级（然后你不必担心工具提示不在视野范围内。

添加到您的代码段...

body{
    position: relative;
}

...将始终将工具提示放在正文的右上角。通过为滚动容器添加容器可以做得更好，但这只是一个例子。

小提琴：https://jsfiddle.net/sunvom3a/2/

Answer 2

只需将位置 绝对 更改为弹出类 相对

jsfiddle：demo

.container {
  overflow-y: scroll;
  height: 100px;
  border: solid 2px green;
}
.popup {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: relative;
  display: none;
}
.item:hover .popup {
  display: block;
}

<div class="container">
  <div class="item"><span>Text1</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text2</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text3</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text4</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text5</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text6</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text7</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text8</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text9</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text10</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text11</span>
    <div class="popup"></div>
  </div>
</div>