2012-04-18 160 views
1

我在屏幕上的某个地方有一个可滚动的div。可滚动div的中心视图

我有一个孩子的div在某个地方。

我该如何滚动div来将这个孩子放在可见区域的中心?

(我将如何确定div的可见宽度和高度,我怎么会滚动放置在该中心的矩形控制?)

+0

你需要的是用纯JS做,或者你的用户一些库,jQuery的例如? – antyrat 2012-04-18 10:08:46

+0

我宁愿拥有纯粹的JS。解释如何用jQuery实现它当然可以对其他读者有用,我也会赞同这一点;) – Will 2012-04-18 10:09:43

回答

0

element.scrollIntoView()可能是你在找什么。

http://jsfiddle.net/a9s2G/

scrollIntoView docs

+0

那你怎么把它集中呢? – Will 2012-04-18 10:18:26

+0

你可以通过在一个匹配滚动区域大小的元素上使用'scrollintoview()'来实现,并使该元素中的内容居中。 – 2012-04-18 10:19:40

+0

您如何确定可见区域的大小? – Will 2012-04-18 10:22:01

0

如果你使用jQuery,您可以尝试scrollTo插件。

在纯js中,这可以使用element.scrollTop完成。您需要获取<div>以内的元素位置,并使用该值滚动主分区。

要计算内部元素位置,您需要使用offsetTopoffsetLeft属性获取它与父元素相关的顶部和左侧属性。

要居中你的元素还可能需要使用element.scrollLeft

+0

你如何计算发送到'scrollTop'和'scrollLeft'的偏移量? – Will 2012-04-18 10:18:58

+0

我已更新我的问题。 – antyrat 2012-04-18 10:21:58

+0

当然,你也需要知道div的可见大小吗?我已经研究出如何获得其内容大小,但不是其窗内大小 – Will 2012-04-18 10:23:16