javascript - 尝试将元素保持在屏幕中央但包含在父元素中

Question

我们有一个脚本用于内联编辑某些文件。基本上，每个文件都被分成几个部分，将鼠标悬停在一个部分上会弹出一组工具(只是一个带有图像按钮的 div)，您可以使用它们来编辑该特定部分。我们将父元素(部分)设置为 position: relative，并将工具集设置为 position:absolute，它们设置在部分的右侧。这一切都很好，特别是因为其中许多都相当小。

但是，我们确实有许多这样的部分，它们可以变得非常大，达到两个屏幕甚至更多的长度。在这些情况下，我们希望工具能够随着用户的滚动而流动，也就是说，如果用户正在查看该部分的垂直中间，按钮也将停留在垂直中间，但是，如果垂直用户屏幕的中心滚过该部分，但用户仍将鼠标悬停在该部分上，我们希望这些工具保留在其父元素中，而不是弹出。

我们已经有一个脚本可以在用户滚动到屏幕之外时移动一个元素，所以我想我可以稍微修改一下来做到这一点，我只是不确定如何通过以下方式绑定(bind)元素它是 parent 。

TL;DR:我将如何创建一个尝试在用户窗口中垂直居中但不能离开其父元素的元素。

Answer 1

保持它垂直对齐但只在该部分悬停时显示不会成功吗？