0

У меня есть контейнер, у которого есть скролл , как узнать на какое кол-во пикселей вниз я прокрутил его ?

const app = new Vue({
   el: '#app',
   data: {
      scrollTop: null
   },
   mounted() {
      this.$nextTick(() => {
         this.scrollTop = this.$refs.container.scrollTop;
         console.log(`Прокручено вниз на ${this.scrollTop} пикселей.`);
      });
    },
   methods: {

   }
});
.container {
   margin: 0 auto;
   width: 1200px;
   height: 864px;
   border: 1px solid red;
   overflow-y: scroll;
   overflow-x: hidden;
}
.top {
      width: 100%;
      height: 405px;
      background: green;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 96px;
      border-radius: 45px;
}
.text {
      font-size: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" ref="container" class="container">
      <div class="top">Текст</div>
      <div class="text">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos illo mollitia animi harum nemo ut natus eligendi placeat perferendis laudantium at rerum debitis accusantium commodi quod quae nihil, neque iusto!
      </div>
   </div>

1
  • 1
    vue не знаю, однако что то мне подсказывает, что надо повесить событие скролла и в нем отслеживать
    – SwaD
    Commented 1 окт. 2023 в 19:39

1 ответ 1

1

Обратите внимание на добавленное событие @scroll="updateScroll"

<div id="app" ref="container" class="container" @scroll="updateScroll">
  <!-- Остальной код -->
</div>

Метод updateScroll, будет отслеживать изменения положения прокрутки

const app = new Vue({
  el: '#app',
  data: {
   scrollTop: null
  },
  methods: {
    updateScroll() {
      this.scrollTop = this.$refs.container.scrollTop;
      console.log(`Прокручено вниз на ${this.scrollTop} пикселей.`);
    }
  }
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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