Vue.component('observer', {
  template: '#damn',
  name: 'observer',
  mounted() {
    this.generateItems()
     this.$nextTick(() => {
       const target = document.querySelector('#shit')
    
     const config = {
       root: target,
       threshold: 0.25
     }
    
    this.observerTop = new IntersectionObserver(this.observerTopCallback, config)
    this.observerBottom = new IntersectionObserver(this.observerBottomCallback, config)
    
     const topTrigger = document.querySelector('#trigger_top')
     const bottomTrigger = document.querySelector('#trigger_bottom')
    
    this.observerTop.observe(topTrigger)
    this.observerBottom.observe(bottomTrigger)
     })
    
  },
  data() {
    return {
      observerTop: null,
      observerBottom: null,
      items: [],
      timesOfTopGenerate: 0
    }
  },
  methods: {
    observerTopCallback(entries, obs) {
      entries.forEach(entry => {
        if (entry.intersectionRatio > 0) {
          
          console.log('Мы вверху')
          
          for (let i = 1; i < 25; i++) {
            this.items.unshift(`Generated top item ${i}, try ${this.timesOfTopGenerate}`,)
          }
          
          this.timesOfTopGenerate += 1
          this.$nextTick(() => {
            document.querySelector('#shit').scrollTop = 500
          })
        }
      })
      
    },
    observerBottomCallback(entries, obs) {
       entries.forEach(entry => {
        if (entry.intersectionRatio > 0) {
          console.log('Мы внизу')
          for (let i = 1; i < 25; i++) {
            this.items.push(`Generated bottom item ${i}`)
          }
        }
      })
    },
    generateItems() {
      for (let i = 0; i < 50; i++) {
        this.items.push(`Item ${i}`)
      }
      
      this.$nextTick(() => {
        document.querySelector('#shit').scrollTop = 500
      })
    }
  }
})

new Vue({
  el: '#app'
})