Есть 4 слайдера с цифрами. Для каждого элемента слайдера я использую scrollIntoView . По идеи все 4 слайдера должны прокручиваться синхронно , console.log отрабатывает у всех правильно и синхронно , но scrollIntoView работает только на последнем элементе , а все остальные слайдеры просто прокручиваются до конца после завершения прокручивания последнего слайдера. В чём проблема не пойму , помогите пожалуйста. Использую Vue3.
<template>
<div class="timer_main">
<div class="inputBlock">
<input
type="datetime-local"
class="inputDateTime"
v-model="inputDateTimeValue"
step="1"
/>
<button @click="startDateTimeCount" class="btnStart">Запустить</button>
</div>
<div class="day" ref="dayScroll">
<span
class="item"
v-for="(day, index) in dateTimeLocal.day"
:key="index"
>{{ day }}</span
>
</div>
<div>:</div>
<div class="hour" ref="hourScroll">
<span
class="item"
v-for="(hour, index) in dateTimeLocal.hour"
:key="index"
>{{ hour }}</span
>
</div>
<div>:</div>
<div class="minute" ref="minuteScroll">
<span
class="item"
v-for="(minute, index) in dateTimeLocal.minute"
:key="index"
>{{ minute }}</span
>
</div>
<div>:</div>
<div class="second" ref="secondScroll">
<span
class="item"
v-for="(second, index) in dateTimeLocal.second"
:key="index"
>{{ second }}</span
>
</div>
</div>
</template>
<script>
import { ref, reactive } from "vue";
export default {
name: "Timer",
setup() {
const dateTimeLocal = reactive({
day: ["0", "1", "2", "3", "4", "5"],
hour: ["0", "1", "2", "3", "4", "5"],
minute: ["0", "1", "2", "3", "4", "5"],
second: ["0", "1", "2", "3", "4", "5"],
});
const inputDateTimeValue = ref(null);
const dayScroll = ref(null);
const hourScroll = ref(null);
const minuteScroll = ref(null);
const secondScroll = ref(null);
const startTimer = () => {
let a = 0;
let aId = setInterval(() => {
if (a == dateTimeLocal.day.length) {
clearInterval(aId);
} else {
dayScroll.value.children[a].scrollIntoView({ behavior: "smooth" });
console.log("Дни идут");
}
a++;
}, 1000);
let b = 0;
let bId = setInterval(() => {
if (b == dateTimeLocal.hour.length) {
clearInterval(bId);
} else {
hourScroll.value.children[b].scrollIntoView({ behavior: "smooth" });
console.log("Часы идут");
}
b++;
}, 1000);
let c = 0;
let cId = setInterval(() => {
if (c == dateTimeLocal.minute.length) {
clearInterval(cId);
} else {
minuteScroll.value.children[c].scrollIntoView({ behavior: "smooth" });
console.log("Минуты идут", minuteScroll.value.children[c]);
}
c++;
}, 1000);
let d = 0;
let dId = setInterval(() => {
if (d == dateTimeLocal.second.length) {
clearInterval(dId);
} else {
secondScroll.value.children[d].scrollIntoView({ behavior: "smooth" });
console.log("Секунды идут");
}
d++;
}, 1000);
};
const startDateTimeCount = () => {
startTimer();
};
return {
dateTimeLocal,
dayScroll,
hourScroll,
minuteScroll,
secondScroll,
startTimer,
inputDateTimeValue,
startDateTimeCount,
};
},
};
</script>
<style lang="scss" scoped>
.timer_main {
display: flex;
font-family: var(--font-first);
font-size: var(--font-big);
color: var(--color-first);
.inputBlock {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
.inputDateTime,
.btnStart {
height: 100px;
padding: 0 20px;
margin: 100px 20px;
border-radius: 10px;
background: var(--color-first);
color: var(--background-app);
font-size: 50px;
}
}
.day,
.hour,
.minute,
.second {
display: flex;
flex-direction: column;
height: 200px;
overflow-y: scroll;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
.item {
scroll-snap-align: start;
}
}
}
</style>