Блог

Главная - Вопросы по программированию - Через Chrome devtools, как я могу определить, какой элемент активно прокручивается?

Через Chrome devtools, как я могу определить, какой элемент активно прокручивается?

#javascript #vue.js #debugging #google-chrome-devtools #breakpoints

#javascript #vue.js #отладка #google-chrome-devtools #точки останова

Вопрос:

Короче говоря, Vue требует некоторой хитрости при отладке высоты и @scroll проблем в компонентах. Лучший призыв к действию — найти, какой элемент прокручивается, и переместить прокрутку на дочерний элемент, в моем случае.

Итак, как я могу найти, какой элемент прокручивается без бесчисленных добавлений / удалений прослушивателей событий?

Ответ №1:

Вы можете получить элемент, который вы прокручиваете, с помощью события прокрутки, которое передается обработчику прокрутки event.target . Я включил фрагмент ниже, который, надеюсь, поможет вашему сценарию.

 Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: "#app",
  methods: {
    scrollHandler(ev) {
      console.log(ev.target.id);
    }
  }
}); 
 #app > div > div {
  height: 200px;
  overflow-y: scroll;
  max-height: 100px;
  display:block;
}

h1 {
font-size: 3rem;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div :id="i" v-for="i in 5" :key="i" @scroll="scrollHandler">
      <h1>{{i}}</h1>
    </div>
  </div>
</div>