我正在研究一些使用Element.getBoundingClientRect
(gBCR)和内联样式更新的代码来执行计算。 这不适用于一般网站,如果有“更好的CSS方式”来执行此任务,我并不关心或感兴趣。
JavaScript以同步方式运行并执行以下步骤:
我是否保证计算出的客户端边界将在步骤4中反映父级的新边界矩形?
如果规范不能保证,现代 1 浏览器实现“保证”吗?如果“主要是保证”,那么有什么明显的例外?
元素不被添加到DOM或从DOM中删除,被修改的元素是父节点的直接子元素;如果这些限制/信息是相关的。
1 “现代”:UIWebView(iOS 6+),WebView(Android 2+),以及通常的Chrome / WebKit,FF,IE9 +嫌疑人 - 包括手机版本
答案 0 :(得分:1)
I'm just stuck at gBCR unreliability on ios8.4.1/Safari8.0.
Prepare a large div on top of body (gBCR is 0) and scroll to bottom (gBCR is negative). Resize the div into 1x1 then window.scrollY
automatically goes 0. gBCR should also be 0 but still stay negative value. With setTimeout
, 200ms later, you can confirm the right value 0.
答案 1 :(得分:0)
老问题,这个问题仍然困扰着我,在搜索中我跌倒了。这可能会帮助其他人。
我能找到使getBoundingClientRect()
可靠工作的最好保证是,在窗口顶部强制刷新,计算位置,然后返回用户所在的任何位置。
代码类似于:
scroll_pos = document.documentElement.scrollTop // save current position
window.scrollTo(0, 0); // go up
v_align = parseInt(el.getBoundingClientRect().top) // example of gBCR for vert.alignment
//... whatever other code you might need
window.scrollTo(0, scroll_pos); // get back to the starting position
通常该操作快如闪电,因此用户不应注意到它。