Stack Overflow
Stack Overflow

Questions tagged [getboundingclientrect]

For Javascript or HTML questions that use Element.getBoundingClientRect().

148 questions
87
votes
2 answers

JavaScript getBoundingClientRect() changes while scrolling

I want to have the exact distance between the Y-coordinate of an element an the Y-value=0, which I consider as the top of the document. myElement.getBoundingClientRect().top; But the value of getBoundingClientRect() seems to change while scrolling.…
enzian
  • 1,607
  • 3
  • 18
  • 19
55
votes
2 answers

An event or observer for changes to getBoundingClientRect()

Is there a way to detect when an element's getBoundingClientRect() rectangle has changed without actually calculating getBoundingClientRect()? Something like a "dirty flag"? Naively, I assume that there must be such a mechanism somewhere in the…
micahscopes
  • 1,034
  • 1
  • 9
  • 12
27
votes
3 answers

getBoundingClientRect in each: undefined is not a function

So I am trying to call some functions when fullscreen sections are in the viewport. Let's say I have 7 sections, then I want something to happen when a certain section is inside the viewport (I have a function that snaps the sections into the…
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
26
votes
6 answers

How best to convert a ClientRect / DomRect into a plain Object

The result of someElement.getBoundingClientRect() returns a special object of type ClientRect (or DomRect apparently) It is structured like {top: 10, right: 20, bottom: 30, left: 10, width: 10} Unfortunately, this object does not behave quite like…
Zach Lysobey
  • 14,959
  • 20
  • 95
  • 149
20
votes
1 answer

In google chrome, getBoundingClientRect().x is undefined

I'm performing drawing operations on canvas. The best way to calculate cursor position relative to canvase top left corner is, in my opinion, usage of .getBoundingClientRect(): HTMLCanvasElement.prototype.relativeCoords = function(event) { var…
Tomáš Zato
  • 50,171
  • 52
  • 268
  • 778
9
votes
1 answer

getBoundingClientReact does not exist

I have built a component that will determine its opening direction based on its dimension and position in the window. I used getBoundingClientRect() function on a react-dom node. Now i have updated some of project packages including react and…
farzad
  • 368
  • 1
  • 3
  • 15
9
votes
1 answer

Browser support of width and height properties of getBoundingClientRect?

I just discovered and really like getBoundingClientRect because it includes sub-pixel precision. This has allowed me to create consistent alignment, even if the user types Ctrl+ or Ctrl+-. It has properties top, bottom, left, right, & width &…
700 Software
  • 85,281
  • 83
  • 234
  • 341
8
votes
2 answers

Receive dimensions of element via getBoundingClientRect in React

I would like to find out the dimensions of a DOM element in a reliable way. My consideration was to use getBoundingClientRect for this. const elementRef = useRef(null); const [dimensions, setDimensions] =…
Jan Bürling
  • 147
  • 1
  • 9
8
votes
2 answers

C# API for puppeteer

Is there any C# API for using Puppeteer? Use case: need to get the coordinates/bounding box for HTML. Could have used Selenium + PhantomJS, but given the instability issues of PhantomJS, we want to try out Puppeteer. Can someone please help?
Harika Rayarapu
  • 81
  • 1
  • 1
  • 2
7
votes
2 answers

JavaScript: Position DIV Centered Above Text Selection?

I am trying to position a
above a users text selection that will act as a toolbar similar to Mediums. While I have successfully gotten the
to be positioned next to the selection, I cannot seem to get it to correctly center relative to…
Miura-shi
  • 4,409
  • 5
  • 36
  • 55
7
votes
2 answers

When is Element.getBoundingClientRect guaranteed to be updated / accurate?

I am working on some code that uses Element.getBoundingClientRect (gBCR), coupled with inline style updates, to perform calculation. This is not for a general website and I am not concerned or interested in if there are "better CSS ways" of doing…
user2864740
  • 60,010
  • 15
  • 145
  • 220
7
votes
3 answers

Safari's getBoundingClientRect() Implementation Returns Incorrect Top

I have a div with float: right and I'm trying to get its distance from the top of the viewport. In every browser except Safari I'm getting the expected results from element.getBoundingClientRect().top. Safari appears to be reporting the element's…
Jackson Egan
  • 2,715
  • 4
  • 18
  • 26
7
votes
1 answer

getBoundingClientRect, incorrect height value for inline SVG

user2800679
6
votes
1 answer

getBoundingClientRect incorrect on a range element in Windows / IE11

When using a range object to getBoundingClientRect in IE11 it reports wrong numbers. It reports the height as 128 while the actual height is 74. It reports the top offset as 8 while the actual top offset is 35. Is this a known bug? Is there a way to…
StefanHayden
  • 3,569
  • 1
  • 31
  • 38
6
votes
1 answer

getBoundingClientRect to detect visibility

Background: I'm currently working on a project where my JS app is embedded into multiple other (parent) JS applications. Some parent app can show/hide my app by setting display:block/none to some element that contains my app. Other parent apps…
haejeong87
  • 847
  • 1
  • 10
  • 20
1
2 3
…
9 10