IntersectionObserver помогите его понять

Question

Документацию читал, но ничего не понятно. Объясните пожалуйста представленный ниже код.

Просто код с интернета:

let ul = document.querySelector('ul')
let n = 1

// функция создания элемента списка
function createLi(){
    li = document.createElement('li') // это я понял
    li.innerHTML = `${++n} item`// тоже понял
    ul.append(li) //тоже понял
}

let observer = new IntersectionObserver((entries, observer) => { // откуда entries, если мы его не инициализировали. И дальше в общем ничего не понял, помогите пожалуйста, объясните его мне.
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            createLi()
        }
        observer.unobserve(entry.target)
        observer.observe(document.querySelector('li:last-child'))
    })
}, {
    threshold: 1
})

observer.observe(document.querySelector('li'))

если не можете объяснить, то сделайте его пожалуйста без использования функции и с инициализацией каждой переменной отдельно, может я так пойму. И по возможности дайте простенький пример.

Answer 1

(entries, observer) => { ... } - это просто функция с двумя параметрами.

В какой-то момент IntersectionObserver просто вызывает ее с конкретными параметрами.

Answer 2

Если максимально все упростить, то работает это так:

class IntersectionObserver {
  constructor(callback) {
    this.callback = callback
    this.elements = []
    window.addEventListener('scroll', this.scroll.bind(this))
  }

  observe(element) {
    this.elements.push({
      node: element,
      isIntersecting: false
    })
  }

  scroll() {
    // Когда происходит событие скрола, перебираем все элементы и проверяем есть ли пересечения
    this.elements.forEach(element => {

      // Данные о элементе(высота, ширина и тд)
      const rect = element.node.getBoundingClientRect()

      // Проверка на то, находится ли элемент в поле зрения
      const in_view = window.scrollY >= rect.top + window.scrollY && window.scrollY <= rect.bottom + window.scrollY


      if (in_view) {
        element.isIntersecting = true
        this.callback(this.elements) // <-- вот откуда берется параметр в функции callback
      } else {
        element.isIntersecting = false
        this.callback(this.elements) // <-- вот откуда берется параметр в функции callback
      }
    })
  }
}



function callback(entries) {
  console.log(entries[0])
}

const observer = new IntersectionObserver(callback)
observer.observe(document.querySelector('.xxx'))

body {
  height: 400vh;
  width: 100%;
  margin: 0;
}

div {
  position: relative;
  top: 200px;
  height: 100px;
  width: 100px;
  background-color: black;
}

<div class="xxx"></div>

БЛОГ НА HUSL

IntersectionObserver помогите его понять

Ответы (2 шт):