Im using react js and Im trying to get the dom element value using getBoundingClientRect().top. Im using useEffect and inside im adding window.scrollY into getBoundingClientRect().top so that i always get the same value. But it returns wrong value. I tried logging just getBoundingClientRect().top and it gives me a value like 155 or something similar but the correct value is 2408. Code:

useEffect(() => {
    console.log(containerRef.current.getBoundingClientRect().top);
}, []);

<div className="experience-containter">
  <div ref={containerRef} className="image-container-1">
    <div>
      <img src={image1} alt="" />
    </div>
  </div>
</div>


.experience-containter {
  position: relative;

.image-container-1 {
width: 250px;
height: 250px;
border-radius: 50%;
position: absolute;
right: 15%;
overflow: hidden;

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 140%;
  object-fit: cover;
  }
 }
}

Im using ref as you can see and trying to get the value containerRef.current.getBoundingClientRect().top. Please help

Im using react js and Im trying to get the dom element value using getBoundingClientRect().top. Im using useEffect and inside im adding window.scrollY into getBoundingClientRect().top so that i always get the same value. But it returns wrong value. I tried logging just getBoundingClientRect().top and it gives me a value like 155 or something similar but the correct value is 2408. Code:

useEffect(() => {
    console.log(containerRef.current.getBoundingClientRect().top);
}, []);

<div className="experience-containter">
  <div ref={containerRef} className="image-container-1">
    <div>
      <img src={image1} alt="" />
    </div>
  </div>
</div>


.experience-containter {
  position: relative;

.image-container-1 {
width: 250px;
height: 250px;
border-radius: 50%;
position: absolute;
right: 15%;
overflow: hidden;

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 140%;
  object-fit: cover;
  }
 }
}

Im using ref as you can see and trying to get the value containerRef.current.getBoundingClientRect().top. Please help

• javascript
• html
• css
• reactjs

• 1 can you please add the javascript part as well. – Arjun Atlast Commented Jul 31, 2022 at 11:25
• Im just logging its value in useEffect to check whether the value is correct or not. I have added the useEffect code – zeshan ahmad Commented Jul 31, 2022 at 12:43

4 Answers 4

getBoundingClientRect() return the value relative to the window (view port), so if you want to get exactly the position no matter how user scroll up and down, you'd better get value of getBoundingClientRect() PLUS the document coordinators.

For example using the function below

// get document coordinates of the element
function getCoords(elem) {
  let box = elem.getBoundingClientRect();

  return {
    top: box.top + window.pageYOffset,
    right: box.right + window.pageXOffset,
    bottom: box.bottom + window.pageYOffset,
    left: box.left + window.pageXOffset
  };
}

For more information, you can refer to the full document here https://javascript.info/coordinates

I encountered this problem in Angular while using element.offsetTop() which does basically the same as .getBoundingClientRect().top. When calling element.offsetTop within ngOnInit() it returned pletely different (and wrong) values.

I solved it by calling it in ngAfterViewChecked(). This method is called last in the ponent lifecycle (https://angular.io/guide/lifecycle-hooks). It seems like offsetTop only works after the view is pletely initialized.

I don't think using the getBoundingClientRect().top is the right way to approach scrolling to an element. The getBoundingClientRect() function returns the bounding box relative to the window and not the entire webpage, so it might not give you the correct position of the element.

You can try using containerRef.current.scrollIntoView() to scroll the element to view. If you want to get the offset value you can try containerRef.current.offsetTop + window.scrollY

For those, who e here from Google:

For me the bination of getBoundingClientRect() and offset values from window or document didn't work and I had to use an offset from html element itself:

getTopDistance(htmlElement) {
    return htmlElement.getBoundingClientRect() - htmlElement.offsetTop;
}