visual rect computation of element

元素的可视矩阵（区域）计算

 

  元素常常需要展现在用户的可视区域内，而元素是否出现在用户的可视区域实际上受以下因素的限制（目前已知，待补充） :

 

1. 窗口 ( viewport ) 限制，随浏览器滚动条变化
2. 自身是否使用了脱离文档流的定位 ( absolute fixed )
3. 父（祖先）元素是否定位
4. 父（祖先）元素包括祖先元素是否设置了 overflow != visible ，限制了子孙元素的展现

   我想要做的事情就是根据以上因素，确定可供元素展现的可视矩阵，后期再通过移动或缩放尽量智能得将元素放在这个矩阵内.

 

 

例如:

 

 

A 为窗口 ，B 为 overflow:hidden position:static 的处于 A 内的容器，C 为 overflow:auto position:static 的处于 B 内的容器，那么 c 中 position:static 元素的可视矩阵只能为三者交叉的折线处，但如果考虑 c 中 position:absolute 的元素或者如果 c 本身为 overflow:visible ，则情况又有所不同.

1. 对于 c 中 position:absolute 的元素，可视矩阵不受 b c 影响，直接为当前窗口 viewport，随浏览器滚动条变化而变化.
2. 如果 c 为 overflow:visible 则 c 中 position:static 元素的可视矩阵和 c 无关 ，实际为 A,B 相交

 

实现：

 

a. 找到可以限制该元素的父（祖先元素），起先想用 offsetParent (msdn , mdc )，但由于需要考虑 overflow 以及ie下的不兼容，放弃！

 

1. 当前元素脱离了文档流，则找祖先定位并设置了 overflow!=visible 的元素
2. 如果元素为 static，则找到设置了 overflow!=visible 的祖先元素

 

b. 通过 a 找到可以限制自己的一个祖先元素后，限定范围为目前祖先元素的当前的可视区域 (top ,left,clientWidth ,clientHeight)，如果祖先元素直接为 body 或找不到则限定范围为浏览器 viewport 并结束.

 

c. 重复 a ，通过求交集进一步限定范围

 

d. 最后再次对浏览器 viewport 求交集

 

 

demo:

 

visual rect computation @ google code

 

可以滚动浏览器，点击文档获得焦点后，按键 1 到 6 来高亮对应 1 - 6 元素的可视矩阵.