getBoundingClientRect根据滚动位置动态更改？

Question

What's wrong with below code? getBoundingClientRect value is not always the same, it changed when I fire the function after I've scrolled. Below function only accurate (scrolled to the correct position) if I didn't scroll the page.

scrollToTargetAdjusted() {
   const element = document.getElementById('myDiv')
   const dockingElementOffset = 80
   const elementPosition = element.getBoundingClientRect().top
   const offsetPosition = elementPosition - dockingElementOffset

    window.scrollTo({
      top: offsetPosition,
      behavior: 'smooth'
    })
}

I didn't use scrollIntoView because I need to have an offset.

Answer 1

According to MDN :

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport .

The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the bounding rectangle. This means that the rectangle's boundary edges (top, right, bottom, left) change their values every time the scrolling position changes (because their values are relative to the viewport and not absolute).

If you need the bounding rectangle relative to the top-left corner of the document, just add the current scrolling position to the top and left properties (these can be obtained using window.scrollX and window.scrollY) to get a bounding rectangle which is independent from the current scrolling position.

So:

window.scrollTo({
  top: offsetPosition +  // based on getBoundingClientRect().top
       window.scrollY,
  behavior: 'smooth'
})