2

Есть 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>

1 ответ 1

0
+100

scrollIntoView - выполняет прокрутку родителя для отображения элемента, на котором он вызван. Когда Вы вызываете его поочереди на нескольких элементах, то происходит прокрутка к последнему, т.к. он должен в конечном итоге быть видимым

5
  • Не совсем понял , как решить проблему.
    – Daniil
    15 ноя 2021 в 20:21
  • в зависимости от того, что Вы хотите реализовать. Я так и не понял, зачем вы создаете 4 списка с значениями от 0 до 5. Возможно нужно "поиграться" с async await
    – Sanya H
    16 ноя 2021 в 14:01
  • Вы же видели в интернет магазинах таймер с временем окончания скидки. Вот тоже самое , только с анимацией в виде вертикального слайдера. Анимация похожая на это codepen.io/glaubersampaio/pen/vOZbPx. В этих списках хранятся числа для слайдера для количество дней , часов, минут и секунд.
    – Daniil
    16 ноя 2021 в 18:38
  • Если вкратце то мне нужно чтобы было 4 блока с цифрами которые будут крутиться одновременно от 5 до 0.
    – Daniil
    16 ноя 2021 в 18:44
  • так что мешает сделать как в примере, что Вы привели, а не изобретать что-то со скроллами?
    – Sanya H
    16 ноя 2021 в 19:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.