问题标签 [getboundingclientrect]

如何检测可滚动块内的元素是否对用户可见（即在可滚动父项的可见区域中）？

是否有一个通用的解决方案，不涉及迭代所有具有滚动的父节点？

PS 我的一个想法是getElementAtPoint，但是当我需要确定至少50%的元素是否可见时，它让我很头疼。所以理想情况下，解决方案必须涉及两个矩形之间的碰撞检测：元素矩形和窗口。

PPS 我想出的另一个想法是scrollIntoView在有问题的元素上使用，确定其位置的差异，然后将其滚动回原始位置。它似乎scrollIntoView总是做正确的事——滚动窗口和内部可滚动块！

我刚刚发现并且非常喜欢getBoundingClientRect，因为它包括亚像素精度。这使我能够创建一致的对齐方式，即使用户键入Ctrl+或Ctrl+也是如此-。

它具有属性top, bottom, left, right, & width& height。

在 Internet 上找到浏览器支持很简单，但对于 thewidth和height属性尤其如此。看来这是事后添加的。它适用于 Firefox、Chrome 和 IE10，但 IE8 和 IE9 呢？我不能方便地测试这些。

我正在尝试获取父 div 的宽度和高度。无论出于何种原因，getBoudingClientRect 给了我一个不正确的高度值（205 或 204.5）宽度是正确的，但高度是关闭的。有任何想法吗？

http://jsfiddle.net/jTvaF/5/

I am trying to save text height value in d (so I can draw around appropriate size rectangle), but it's not defined in tick function or any where else.

should hold values. (but it doesn't)

So I have tick function (part of it):

And here how I'm trying to save values (bottom of code)

Can I make it global? Or have to save these values?

我尝试通过使用 getBoundingClientRect(); 来检测元素是否在视口中；

但我的情况是，当（只有一个）元素在视口上时，我想添加一些功能，比如点击一些 html 锚标记

什么时候 ：

• 元素的顶部 >= 0
• window.scrollTop =< 元素的高度

例子 ：

块#A（顶部=0，高度=200）

区块#B (TOP=200, HEIGHT=450)

区块#C (TOP=450, HEIGHt=600)

当顶视口为100时，我将对 Block#A 做一些事情

到目前为止我的代码：

游乐场：http: //jsfiddle.net/5LK3U/

我发现了一个可能很奇怪的行为getClientRects() [getBoundingClientRect()]：

看看这个 HTML 代码：

[注意a元素里面没有文字，我只测试了这种代码，不知道其他排列是否给出相同的'bug'。]

假设当用户选择 p 'estate' 中包含锚点的范围时，例如“word1 word2”，JS 函数存储开始/结束元素和偏移量。下次另一个函数创建一个具有这些边界的范围。但是如果getClientRects()在该范围内调用它会产生许多矩形而不是预期的两个矩形：数组的第一个和最后一个矩形确实是预期的，但是在它们之间，有许多矩形实际上覆盖了整个 p 元素。[range.getBoundingClientRect()也受到影响。]如何避免这种情况？

当我将它用于 facebook 来检测帖子的高度时，它就起作用了。考虑到这obj是该帖子的一个节点。当我可以看到帖子时，它在我的 chrome 扩展程序中运行良好。当我滚动过去大约 200 像素时，它会起作用。但是当我向下滚动很远时，它不再起作用了。

即使我确定尺寸仍然高于零。发生了什么？

关于computedStyle显示如下所示：

我正在制作一个应该在帖子中测量距离的脚本。例如，如果我有三个帖子：

• 帖子1：两行文字，然后是我想看的图像。
• 帖子2：只是我想看到的图像。
• 帖子3：我想看到的图像后跟两行。

我想要这个的原因是因为我认为 Tumblr 在他们的描述中显示了太多的废话。我正在制作一个 chrome 扩展，它将裁剪图像周围的所有废话，这样你就不必滚动了。在每个帖子上都会出现一个按钮来查看整个帖子。

到今天为止，效果很好！有了getBoundingClientRect我可以从窗口获得顶部、左侧、底部和右侧的偏移量。只有1个问题。我不能立即为页面上的所有帖子执行此操作，因为如果帖子距离文档的可见部分（您在浏览器中查看的部分）700px 或更多，则 GBCR 提供的所有值将是0。

这些值无效，并且可能为零，因为帖子未在屏幕上呈现。如果我滚动，我可以让我的扩展程序尝试获取尺寸，这样当帖子进入窗口的可见部分时，它就会被处理。但这没有我的偏好。这意味着每次用户滚动时都必须触发我的 JS 函数，这是不好的做法。我宁愿在加载 dom 时启动我的函数，所以如果添加新帖子，函数将被触发。

我的问题如下：当帖子未在屏幕上呈现时，是否有一种解决方法可以确保 GBCR 功能正常工作。或者有没有一种方法可以让我获得一个元素的坐标getComputedStyle（无需遍历所有元素）？

在其中一个网站上，我发现body元素已设置position: relative，并且正文中的内容似乎向下移动了margin-top在正文中最顶部元素上设置的 CSS 值的比例。

1. 为什么body有CSS'position：relative'设置？它是为了修复一些错误吗？我听说有一些 IE 错误，我们无法设置元素的绝对定位。

2. 为什么“仅”主体内的第一个元素的“margin-top”会影响每个元素的位置？

3. Javascript 函数 'getBoundingClientRect()' 为任何元素返回错误值，因为它不考虑在最顶部元素上设置的这个 margin-top 值。

所以当全屏部分在视口中时，我试图调用一些函数。假设我有 7 个部分，那么当某个部分位于视口内时，我希望发生一些事情（我有一个将这些部分捕捉到视口中的功能，因此视口中永远不会有多个部分，但我试图找到出哪个部分在视口中可见）。

这是一个小提琴：http: //jsfiddle.net/h7Hb7/2/

我不知道从哪里开始寻找，但我猜这与每个功能有关。是不是每个功能都有问题？这不可能是 CSS 问题，因为当 CSS 已加载时，滚动时会出现问题。