滚动一个隐藏溢出的div，使其中的元素居中

Question

我有一个包含几个元素的div。它们中的每一个都作为分页编号工作，当我单击其中一个时，容器div必须滚动以使该元素居中。

div有一个溢出：隐藏的行为，所以我必须找到div的实际大小，而不仅仅是它的可见部分。

Answer 1

首先，您需要找到div的内部宽度。 您可以使用它：

$("#divOverflowHidden")[0].scrollWidth

现在你需要计算元素的位置必须是这样的：

{element index} * {overflow hidden div inside width} / {number of elements}

代码应该是这样的：

 index * $("#divOverflowHidden")[0].scrollWidth / total

现在，如果您有水平滚动条，则需要使用$("#divOverflowHidden").scrollLeft() 将滚动条移动到正确的位置;如果您有垂直滚动条，则需要$("#divOverflowHidden").scrollTop()。< / p>

结果是元素将显示在溢出的div的左侧。要集中元素，您可以减去计算结果，即溢出div的外部宽度的一半。所以新的公式是：

(({element index} * {overflow hidden div inside width}) / {number of elements}) - ({overflow hidden div ouside width} / 2)

... Finaly

((index * $("#divOverflowHidden")[0].scrollWidth) / total) - $("#divOverflowHidden").width() / 2)

Answer 2

您可以在javascript：

中使用 scrollHeight

document.getElementById("container").scrollHeight;

或jQuery

$("#container")[0].scrollHeight;

示例：Demo