vue.js scroll

mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    console.log('Scrolling...');
  }
}

.scroll-container {
  height: 300px;
  overflow-y: auto;
}

import { debounce } from 'lodash';

methods: {
  handleScroll: debounce(function() {
    // 处理滚动逻辑
  }, 100)
}

<template>
  <virtual-list :size="50" :remain="8">
    <div v-for="item in items" :key="item.id" class="list-item">
      {{ item.text }}
    </div>
  </virtual-list>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list';

export default {
  components: { VirtualList },
  data() {
    return {
      items: Array.from({ length: 1000 }, (_, i) => ({ id: i, text: `Item ${i}` }))
    };
  }
};
</script>