问题标签 [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.
javascript - 元素是否在内部嵌套滚动的后面
如何检测可滚动块内的元素是否对用户可见(即在可滚动父项的可见区域中)?
是否有一个通用的解决方案,不涉及迭代所有具有滚动的父节点?
PS 我的一个想法是getElementAtPoint
,但是当我需要确定至少50%的元素是否可见时,它让我很头疼。所以理想情况下,解决方案必须涉及两个矩形之间的碰撞检测:元素矩形和窗口。
PPS 我想出的另一个想法是scrollIntoView
在有问题的元素上使用,确定其位置的差异,然后将其滚动回原始位置。它似乎scrollIntoView
总是做正确的事——滚动窗口和内部可滚动块!
javascript - 浏览器是否支持 getBoundingClientRect 的宽度和高度属性?
我刚刚发现并且非常喜欢getBoundingClientRect
,因为它包括亚像素精度。这使我能够创建一致的对齐方式,即使用户键入Ctrl+或Ctrl+也是如此-。
它具有属性top
, bottom
, left
, right
, & width
& height
。
在 Internet 上找到浏览器支持很简单,但对于 thewidth
和height
属性尤其如此。看来这是事后添加的。它适用于 Firefox、Chrome 和 IE10,但 IE8 和 IE9 呢?我不能方便地测试这些。
javascript - getBoundingClientRect,内联 SVG 的高度值不正确
我正在尝试获取父 div 的宽度和高度。无论出于何种原因,getBoudingClientRect 给了我一个不正确的高度值(205 或 204.5)宽度是正确的,但高度是关闭的。有任何想法吗?
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?
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/
javascript - 当空锚在 HTML 段落中时,范围 getClientRects()、getBoundingClientRect() 错误
我发现了一个可能很奇怪的行为getClientRects() [getBoundingClientRect()]
:
看看这个 HTML 代码:
[注意a元素里面没有文字,我只测试了这种代码,不知道其他排列是否给出相同的'bug'。]
假设当用户选择 p 'estate' 中包含锚点的范围时,例如“word1 word2”,JS 函数存储开始/结束元素和偏移量。下次另一个函数创建一个具有这些边界的范围。但是如果getClientRects()
在该范围内调用它会产生许多矩形而不是预期的两个矩形:数组的第一个和最后一个矩形确实是预期的,但是在它们之间,有许多矩形实际上覆盖了整个 p 元素。[range.getBoundingClientRect()
也受到影响。]如何避免这种情况?
javascript - 滚动足够远时 getBoundingClientRect() 不起作用
当我将它用于 facebook 来检测帖子的高度时,它就起作用了。考虑到这obj
是该帖子的一个节点。当我可以看到帖子时,它在我的 chrome 扩展程序中运行良好。当我滚动过去大约 200 像素时,它会起作用。但是当我向下滚动很远时,它不再起作用了。
即使我确定尺寸仍然高于零。发生了什么?
关于computedStyle
显示如下所示:
javascript - GetBoundingClientRect 在窗口外不起作用
我正在制作一个应该在帖子中测量距离的脚本。例如,如果我有三个帖子:
- 帖子1:两行文字,然后是我想看的图像。
- 帖子2:只是我想看到的图像。
- 帖子3:我想看到的图像后跟两行。
我想要这个的原因是因为我认为 Tumblr 在他们的描述中显示了太多的废话。我正在制作一个 chrome 扩展,它将裁剪图像周围的所有废话,这样你就不必滚动了。在每个帖子上都会出现一个按钮来查看整个帖子。
到今天为止,效果很好!有了getBoundingClientRect
我可以从窗口获得顶部、左侧、底部和右侧的偏移量。只有1个问题。我不能立即为页面上的所有帖子执行此操作,因为如果帖子距离文档的可见部分(您在浏览器中查看的部分)700px 或更多,则 GBCR 提供的所有值将是0。
这些值无效,并且可能为零,因为帖子未在屏幕上呈现。如果我滚动,我可以让我的扩展程序尝试获取尺寸,这样当帖子进入窗口的可见部分时,它就会被处理。但这没有我的偏好。这意味着每次用户滚动时都必须触发我的 JS 函数,这是不好的做法。我宁愿在加载 dom 时启动我的函数,所以如果添加新帖子,函数将被触发。
我的问题如下:当帖子未在屏幕上呈现时,是否有一种解决方法可以确保 GBCR 功能正常工作。或者有没有一种方法可以让我获得一个元素的坐标getComputedStyle
(无需遍历所有元素)?
html - HTML body 元素定位为“相对”时的问题
在其中一个网站上,我发现body
元素已设置position: relative
,并且正文中的内容似乎向下移动了margin-top
在正文中最顶部元素上设置的 CSS 值的比例。
为什么body有CSS'position:relative'设置?它是为了修复一些错误吗?我听说有一些 IE 错误,我们无法设置元素的绝对定位。
为什么“仅”主体内的第一个元素的“margin-top”会影响每个元素的位置?
Javascript 函数 'getBoundingClientRect()' 为任何元素返回错误值,因为它不考虑在最顶部元素上设置的这个 margin-top 值。
javascript - getBoundingClientRect 在 each: undefined is not a function
所以当全屏部分在视口中时,我试图调用一些函数。假设我有 7 个部分,那么当某个部分位于视口内时,我希望发生一些事情(我有一个将这些部分捕捉到视口中的功能,因此视口中永远不会有多个部分,但我试图找到出哪个部分在视口中可见)。
这是一个小提琴:http: //jsfiddle.net/h7Hb7/2/
我不知道从哪里开始寻找,但我猜这与每个功能有关。是不是每个功能都有问题?这不可能是 CSS 问题,因为当 CSS 已加载时,滚动时会出现问题。