[useElementBounding]: doesn't update bounding box on scroll

[jeffrey-dot-li]

I'm a bit confused about what useElementBounding is supposed to do but if it is supposed to mirror getBoundingClientRect like it says in the docs then it should update the properties such as top and y relative to the viewport scroll like the example in the mozilla documentation:

Currently bounding box doesnt change on scroll

[jeffrey-dot-li]

Maybe this isn't what element bounding is intended for? In that case, can we add a hook for getBoundingClientRect similar to what is used in useMouseInElement?

vueuse/packages/core/useMouseInElement/index.ts

Line 51 in b3d1e2c

} = el.getBoundingClientRect()

[pwang2]

I also feel it is weird to not have a BCR reactive to resizing, scrolling. I managed to get it work as below, but feel not very satisfied.

import { useElementBounding, useResizeObserver } from "@vueuse/core"
const triggerRect = reactive(useElementBounding(trigger))
useResizeObserver(document.documentElement, () => {
  Object.assign(triggerRect, useElementBounding(trigger))
})```

[m0dch3n]

not sure, if this is related too, but

const mydiv = ref()
const { width } = useElementBounding(mydiv)
onMounted(() => {
  console.log('div', mydiv.value) // the div is consoled
  console.log('width value', width.value) // is still 0
  console.log('width clientrect', mydiv.value.getBoundingClientRect().width) // is correct width
  setTimeout(() => {
    console.log('width value 3', width.value) // is correct width value...
  })
})

The dimensions should be available onMounted....

[Hebilicious]

@m0dch3n Had the same issue, #1541 fixes it 👍🏽