Делал небольшую анимацию и столкнулся с проблемой, на Desktop всё корректно отображается в консоли, как только переключаюсь на мобильную версию, getBoundingRect да и другие стандартные функции работают через раз, изменяют свои значения только после того, как пролистну элемент, из-за этого анимация включается когда уже элемент давно позади
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
some text
<div class="arrs-about-us">
<div class="arrs-special-block">
<img class="arr-about-us" src="./rows-png/row1.png"></img>
<img class="arr-about-us" src="./rows-png/row2.png"></img>
<img class="arr-about-us" src="./rows-png/row3.png"></img>
<img class="arr-about-us" src="./rows-png/row4.png"></img>
<img class="arr-about-us" src="./rows-png/row5.png"></img>
<img class="arr-about-us" src="./rows-png/row6.png"></img>
<img class="arr-about-us" src="./rows-png/row7.png"></img>
<img class="arr-about-us" src="./rows-png/row8.png"></img>
<img class="arr-about-us" src="./rows-png/row9.png"></img>
<img class="arr-about-us" src="./rows-png/row10.png"></img>
</div>
</div>
some text
<script src="./script.js"></script>
</body>
</html>
function rowsAnimation(flag){
if(document.querySelector('.arrs-about-us').getBoundingClientRect().top - document.documentElement.clientHeight < 0 && !flag){
for(let i = 1; i<=10; i++){
setTimeout(()=>{ArrayOfRows[i-1].classList.add('arr-active')}, i * 200)
}
flag = true;
}
}
document.addEventListener('DOMContentLoaded', (e)=>{
var flag = false;
ArrayOfRows = document.querySelectorAll('.arr-about-us');
document.addEventListener('scroll', (e)=>{
setInterval(()=>{
console.log(document.querySelector('.arrs-about-us').getBoundingClientRect().top)
}, 1000)
rowsAnimation(flag)
});
if(document.querySelector('.arrs-about-us').getBoundingClientRect().top-window.pageYOffset+300 < 0){
console.log(window.scrollY);
rowsAnimation(flag)
}
})
body{
height: 5000px;
justify-content: center;
align-items: center;
}
.arrs-about-us{
position: relative;
margin-top: 1000px;
overflow: hidden;
height: 591px;
width: 1322px;
border: 2px green solid;
background-color: #141A2D;
}
.arrs-special-block{
display: flex;
position: relative;
justify-content: space-around;
align-items: end;
width: 100%;
height: 100%;
}
.arr-about-us{
position: relative;
bottom: -100%;
width: 60px;
max-height: 100%;
transition: all 1s;
}
.arr-active{
bottom: 0;
}
@media(max-width: 1277px){
.arrs-about-us{
height: 457px;
width: 1015px;
}
.arrs-special-block{
left: -40%;
}
.arr-about-us{
margin: 0 17px;
width: 35px;
}
}
@media(max-width: 760px){
.arrs-about-us{
height: 800px;
}
.arrs-special-block{
bottom: 0;
height: 457px;
position: absolute;
width: 638px;
left: calc( (100vw - 638px) / 2);
}
.arr-about-us{
margin: 0 20px;
width: 32px;
transition: all 1s;
}
}
вот прям всё перепробовал: десктоп - да, мобилки - нет
