Refactor jQuery прослушиватель событий inview

Question

Я хочу преобразовать следующий код в чистый JavaScript.

$(function () {
    $('h2,.single').on('inview', function () {
        $(this).addClass('is-show');
    });
});

Я пытался много времени, но все еще не могу понять, как. Любая помощь?

Answer 1

Inview был старым плагином для решения проблемы, которая теперь имеет веб-API, если вам не нужна поддержка IE, вы можете использовать наблюдатель пересечения для этого.

Без какого-либо примера или дальнейшего объяснения того, как вам нужно функционировать, трудно догадаться, чего вы хотите достичь. Но вот базовая c реализация, которая будет имитировать c крошечный бит JQuery, который вы предоставили.

const sections = [].slice.call(document.querySelectorAll(".single"));

function createObserver(el) {
  let observer;

  const options = {
    root: null,
    rootMargin: "0px",
    threshold: 0.5
  };

  observer = new IntersectionObserver(handleIntersect, options);
  observer.observe(el);
}

function handleIntersect(entries, observer) {
  entries.forEach((entry) => {
    let box = entry.target;
    let visible = entry.intersectionRatio;
    if(visible > 0.5) {
      box.classList.add('is-show');
    } else {
      box.classList.remove('is-show');
    }
  });
}



const setup = (sections) => {
  for (let i in sections) {
    const el = sections[i];
    createObserver(el);
  }
}


setup(sections);

.single {
  padding: 2rem;
  background: tomato;
  color: #fff;
  margin: 600px 0;
  transition: all .5s ease-out;
  opacity: 0;
}
.is-show {
  opacity: 1
}

<h2 class="single">I'm an H2 Element in frame</h2>
<h2 class="single">I'm an H2 Element in frame</h2>
<h2 class="single">I'm an H2 Element in frame</h2>
<h2 class="single">I'm an H2 Element in frame</h2>

Answer 2

Кроме события, вы можете использовать это:

(function() {
     document.querySelector("h2, .single").addEventListener("click", function(){
         this.classList.add("is-show");
  });
})();

Я не нашел эквивалента для inview. Вы можете сослаться на это .