Javascript getBoundingClientRect是否根据滚动位置动态更改?
下面的代码有什么问题Javascript getBoundingClientRect是否根据滚动位置动态更改?,javascript,html,reactjs,dom,Javascript,Html,Reactjs,Dom,下面的代码有什么问题getBoundingClientRect值并不总是相同的,当我在滚动后启动函数时,它会发生变化。如果我没有滚动页面,下面的函数仅精确(滚动到正确的位置) scrollToTargetAdjusted() { const element = document.getElementById('myDiv') const dockingElementOffset = 80 const elementPosition = element.getBoundingCl
getBoundingClientRect
值并不总是相同的,当我在滚动后启动函数时,它会发生变化。如果我没有滚动页面,下面的函数仅精确(滚动到正确的位置)
scrollToTargetAdjusted() {
const element = document.getElementById('myDiv')
const dockingElementOffset = 80
const elementPosition = element.getBoundingClientRect().top
const offsetPosition = elementPosition - dockingElementOffset
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
})
}
我没有使用滚动视图,因为我需要一个偏移量。根据:
getBoundingClientRect()方法返回元素的大小及其相对于视口的位置
计算边界矩形时,将考虑视口区域(或任何其他可滚动元素)已完成的滚动量。这意味着每当滚动位置更改时,矩形的边界边(上、右、下、左)都会更改其值(因为它们的值是相对于视口的,而不是绝对的)
如果需要相对于文档左上角的边框,只需将当前滚动位置添加到顶部和左侧属性(可以使用window.scrollX和window.scrollY获得这些属性),即可获得独立于当前滚动位置的边框
因此:
您可以发布getBoundingClientReact()吗?如果您因专有原因无法回答,我们可以尝试不回答。
window.scrollTo({
top: offsetPosition + // based on getBoundingClientRect().top
window.scrollY,
behavior: 'smooth'
})