如何使用JavaScript查找Scrollbar中间点？

Question

我有一个图像，我根据某个因素缩放（缩放），在视口（div）中有fixed width和{{1} }。

目前图片完全适合height。 图像缩放后，我需要innerViewport图像到中点。 要聚焦图像，我打算将滚动条移动到视口的中间位置（focus）。

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

算法：

1）检索图像的div和height

width

2）计算缩放

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

3）将其设置回图像

hI = hI * 0.5
wI = wI * 0.5

4）将相同的值设置为图像视口

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

直到这一点它的工作正常，但滚动到它的中间不起作用，因为滚动当前处于左上角位置。

html

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

Answer 1

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

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

您可以在此处看到它：http://jsfiddle.net/e6dK4/ - 只需点击图片即可。