问题标签 [getboundingclientrect]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
692 浏览

javascript - 元素是否在内部嵌套滚动的后面

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

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

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

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

0 投票
1 回答
6351 浏览

javascript - 浏览器是否支持 getBoundingClientRect 的宽度和高度属性?

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

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

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

0 投票
1 回答
5189 浏览

javascript - getBoundingClientRect,内联 SVG 的高度值不正确

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

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

0 投票
1 回答
183 浏览

javascript - Have to save text height in d using d3 library

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?

0 投票
1 回答
3555 浏览

javascript - 检测是否滚动到元素(使用 getBoundingClientRect(); )

我尝试通过使用 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/

0 投票
0 回答
1725 浏览

javascript - 当空锚在 HTML 段落中时,范围 getClientRects()、getBoundingClientRect() 错误

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

看看这个 HTML 代码:

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

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

0 投票
0 回答
679 浏览

javascript - 滚动足够远时 getBoundingClientRect() 不起作用

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

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

关于computedStyle显示如下所示:

0 投票
0 回答
563 浏览

javascript - GetBoundingClientRect 在窗口外不起作用

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

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

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

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

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


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

0 投票
1 回答
1348 浏览

html - HTML body 元素定位为“相对”时的问题

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

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

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

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

0 投票
3 回答
71916 浏览

javascript - getBoundingClientRect 在 each: undefined is not a function

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

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

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