滚动隐藏溢出的 div 以将其中的元素居中答案

【问题标题】：Scroll a div with overflow hidden to center a element inside it滚动隐藏溢出的 div 以将其中的元素居中
【发布时间】：2025-12-30 11:35:12
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

代码应该是这样的：

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

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

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

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

终于...

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

【讨论】：

【解决方案2】：

您可以在 javascript 中使用 scrollHeight：

document.getElementById("container").scrollHeight;

或 jQuery

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

此处的示例：Demo

【讨论】：