when scrolling, I need to listen to the height of an area from the screen. This area is a public component. I wrote the monitoring events there. I have tried both ref and DOM access methods. The first time I enter or switch the route to the page is to report the following error
but if you refresh the current page once, the error will not be reported again.
I didn"t listen until after mouted. The code is as follows:
methods: {
_scroll() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
let aside = this.$refs.aside;
let st = aside.getBoundingClientRect().top;
if(st<0){
aside.style.top = "50px"
aside.style.left = "5%"
aside.style.position = "fixed"
}else if(scrollTop<450){
aside.style.top = "0px"
aside.style.left = "0%"
aside.style.position = "absolute"
}
},
},
mounted(){
window.addEventListener("scroll",this._scroll,false)
},
destroyed(){
window.removeEventListener("scroll",this._scroll)
},every time you jump from a page to the current page, you will get an error every time you scroll.
but if you refresh the next page directly and then scroll, you will not get an error.
refresh n times will not cause an error.
there have been similar problems on the site before, but there is no effective solution.
repeated execution error: Cannot read property "getBoundingClientRect" of undefined
vue is bound to ref and cannot find getBoundingClientRect
the latest discovery is that I printed the acquired dom, and found that it is not always impossible to get it when scrolling, but there is an interval between scrolling. I got it one moment, but I can"t get it the next moment, and then I can get the latter one. What"s going on?
I tried to change the obtained dom to write in data, and the result is the same in computed,created,mounted, so is this the cause of the scrolling event?