A few scrollIntoViews aren't synchronized?

[kalena]

There are four sliders with numbers. For every slider element, I use scrollIntoView. According to the idea, all four sliders should be synchronized, console.log is working in the right and sync, but scrollIntoView only works on the last element, and all the other sliders are just rolling out after the last slider is finished. What's the problem, please help me. Use 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(() =&gt; {
    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(() =&gt; {
    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(() =&gt; {
    if (d == dateTimeLocal.second.length) {
      clearInterval(dId);
    } else {
      secondScroll.value.children[d].scrollIntoView({ behavior: "smooth" });
      console.log("Секунды идут");
    }
    d++;
  }, 1000);
};

const startDateTimeCount = () =&gt; {
  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>

[Anderson]

scrollIntoView - performs a parent ' s door to display the element on which it is caused. When you call him in a few elements, there's a wire to the last, because he should eventually be visible.