Я хочу вызвать функцию, когда пользователь видит элемент

Question

Я хочу вызвать функцию, когда пользователь видит элемент. Цель состоит в том, чтобы я хотел видеть просмотренные сообщения на сайте

Answer 1

Для такого требования вам необходимо определить, находится ли элемент в области просмотра при определенных событиях (прокрутка окна или загрузка документа).

function isInsideViewport(el) {
    var scroll = window.scrollY || window.pageYOffset,
        boundsTop = el.getBoundingClientRect().top + scroll,
        viewport = {top: scroll, bottom: scroll + window.innerHeight},
        bounds = {top: boundsTop, bottom: boundsTop + el.clientHeight},
        visible = $(el).is(':visible'),
        viewTop = (bounds.bottom >= viewport.top && bounds.bottom <= viewport.bottom),
        viewBot = (bounds.top <= viewport.bottom && bounds.top >= viewport.top);

    return visible && (viewTop || viewBot);
}

function checkAllElements() {
    $('.itemSelector').each(function(i,elem){
      if (isInsideViewport(elem)) {
       console.log(elem,' is inside viewport');
      }
    });
};

//on ready check which are already inside viewport
$( document ).ready(checkAllElements);

//on scroll check whick came to viewport
$(window).scroll(checkAllElements);

Answer 2

Intersection Observer - правильный путь к go в 2020 году. Он поддерживается во всех основных браузерах, кроме Inte rnet Explorer.

Если вы это сделаете решите использовать события прокрутки, как упоминалось в некоторых других ответах, пожалуйста, рассмотрите debouncing обработчик событий, потому что обработка событий прокрутки может значительно снизить производительность вашего сайта.

Answer 3

Обычно это делалось с помощью прокрутки и окон просмотра, но более удобный способ выглядит так: https://usefulangle.com/post/118/javascript-intersection-observer