Как проверить, виден ли элемент после прокрутки?

Это должно решить вашу задачу:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

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

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

Использование

var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

if (isElementInView) {
    console.log('в области видимости');
} else {
    console.log('вне области видимости');
}

Теперь вы можете легко проверять, виден ли определенный элемент на странице, используя предложенный код.

Чтобы проверить, видим ли элемент (el) в прокручиваемом контейнере (holder), вы можете воспользоваться следующей функцией:

function isElementVisible (el, holder) {
  holder = holder || document.body;
  const { top, bottom, height } = el.getBoundingClientRect();
  const holderRect = holder.getBoundingClientRect();

  return top <= holderRect.top
    ? holderRect.top - top <= height
    : bottom - holderRect.bottom <= height;
}

Эта функция использует метод getBoundingClientRect() для получения положения элемента относительно viewport и проверяет, попадает ли он в видимую область прокручиваемого контейнера. Если holder не указан, используется document.body как контейнер по умолчанию.

Пример использования с jQuery:

var el = $('tr:last').get(0);
var holder = $('table').get(0);
var isVisible = isElementVisible(el, holder);

Здесь мы получаем последний элемент строки таблицы и саму таблицу как holder. Затем вызываем функцию isElementVisible, чтобы проверить, виден ли элемент в пределах прокручиваемой области таблицы.

Вы можете использовать следующий код, чтобы проверить, находится ли элемент в пределах видимости:

function isInView(elem){
   return $(elem).offset().top - $(window).scrollTop() < $(elem).height();
}

После этого вы можете выполнить любое действие, когда элемент окажется в пределах видимости, например:

$(window).scroll(function(){
   if (isInView($('.classOfDivToCheck')))
      // выполните то, что нужно
      dothis();
})

Этот подход отлично работает для меня.

Ваш код определяет, находится ли элемент в пределах видимой области экрана. Это полезно, если вам нужно выполнить какое-либо действие, когда элемент оказывается в пределах прокрутки. Вот немного измененный вариант функции, который проверяет, только ли верхний край элемента вошел в видимую область:

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop(); // верхняя позиция видимой области
    var elemTop = $(elem).offset().top; // верхняя позиция элемента
    return elemTop <= docViewTop + 1; // проверяем, что верх элемента находится в видимой области
}

В этом варианте добавлено небольшое смещение (1 пиксель), чтобы учесть ситуации, когда элемент только начинает появляться на экране. Вы можете настроить это значение по своему усмотрению. Не забудьте, что для использования jQuery нужно подключить соответствующую библиотеку на вашей странице.

Самое простое решение, которое я нашел, — это API взаимодействия с областью видимости (Intersection Observer API). Вот пример его использования:

var observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true) {
        console.log('Элемент только что стал видимым на экране');
    }
}, { threshold: [0] });

observer.observe(document.querySelector("#main-container"));

Этот код создает новый наблюдатель, который отслеживает, становится ли определенный элемент видимым на экране. Когда элемент с ID main-container попадает в область видимости, срабатывает колбэк-функция, и в консоль выводится сообщение.