滚动一个隐藏溢出的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()

结果是元素将显示在溢出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)