如何使用JavaScript查找滚动条中点？

我有一个图像，我正在缩放缩放基于某个因素的视口div，它的宽度和高度是固定的

当前，图像完全适合内部视口。 一旦图像被缩放，我需要将图像聚焦到它的中点。 要聚焦图像，我计划将滚动条移动到viewport div的中间

但我不知道如何解决这个问题

算法：

1检索图像的高度和宽度

hI = image.width();
wI = image.height();

2计算缩放

hI = hI * 0.5
wI = wI * 0.5

3将此设置回图像

image.setWidth(wI)
image.setHeight(hI)

4为“图像”视口设置相同的值

innerViewport.setWidth(wI)
innerViewport.setHeight(hI)

直到这一点，它的工作良好，但滚动到它的中间不工作，因为滚动目前在左上方的位置

html

---

如果您有视口的大小和图像的大小，您可以简单地计算偏移量，并使用jQuery的scrollTop/scrollLeft方法来设置滚动偏移量：

$viewport
  .scrollTop((imageHeight - viewportHeight) / 2)
  .scrollLeft((imageWidth - viewportWidth) / 2);

---

您可以在此处看到它的作用：-只需单击图像。

此代码仅给出滚动条的起点而不是滚动条的中点。是的，我确定，我的应用程序仅在IE 8++浏览器中工作，尝试在IE中实现此功能时发现它不起作用。Sorry即使在IE8上，提供的示例也会滚动到中心：我在ie10中尝试了相同的小提琴，发现它不起作用，但找到了一个函数来获得适当的高度和宽度：h=viewport.getBoundingClientRect.height..etcIt我很少需要拿出两个VM来“证明我的答案”，但是现在我们开始-IE10:-请注意，前面的示例已经被托管在jsbin上，以删除任何可能导致冲突超出我控制范围的其他脚本。

$viewport
  .scrollTop((imageHeight - viewportHeight) / 2)
  .scrollLeft((imageWidth - viewportWidth) / 2);