javascript - 用于相对于用户在约束内单击的位置定位框的数学公式？

Question

这对我来说很难解释，但我正在寻找一个数学公式来定义相对于用户在一列行中单击的位置弹出框的位置。

这里试图阐明我的意思: https://imgur.com/a/DbJA3

红色圆圈是用户在左侧列中单击的位置，右侧的框是弹出的位置。因此，当用户单击列底部的一行时，该框应该弹出，以便底部边缘与列底部对齐。如果用户在中间点击它应该对齐到中间。这样弹出的框永远不会超出左侧列的高度，因此用户永远不必滚动。

这有意义吗？我可以使用 CSS 来设置框的绝对位置，但我只需要一个公式来确定它应该位于的位置。

Answer 1

我认为没有一个公式可以满足这一条件，但通过一些编程你可以让它发挥作用。你从显而易见的开始:

top    := click.y - height / 2
bottom := click.y + height / 2

然后你完善它:

if bottom > container.height -> 
    bottom := container.height
    top    := MAX(0, bottom - height)
elif top < 0 ->
    top    := 0
    bottom := MIN(container.height, height)
fi