Преобразовать jquery в javascript - когда я прокручиваю вниз до указания области c (Div ID), загружается HTML Содержимое один раз

Question

У меня есть этот код, когда я прокручиваю вниз, чтобы указать c область (Div ID) загружать HTML Содержимое один раз.

Фактически работает с jQuery, но я хочу JavaScript только, без jQuery

$(window).on("scroll", function () {
    if (checkVisible($("#target"))) {
        $("#something").html(
            `HTML CONTENT`
        );

        $(window).off("scroll");
    } else {
        // do nothing
    }
});

function checkVisible(elm, eval) {
    eval = eval || "object visible";
    var viewportHeight = $(window).height(), 
        scrolltop = $(window).scrollTop(),  
        y = $(elm).offset().top,
        elementHeight = $(elm).height();

    if (eval == "object visible")
        return (
            y < viewportHeight + scrolltop && y > scrolltop - elementHeight
        );
    if (eval == "above") return y < viewportHeight + scrolltop;
}

любых предложений

Answer 1

Функция jQuery .on() (если dom не изменена) заменяет addEventListener()

Селекторы элементов jQuery (#target или #something) вы можете заменить на document.getElementById() или document.querySelector() или document.querySelectorAll() функции.

Свойство scrollTop доступно для прокручиваемого элемента без jQuery (но не функции, это всего лишь свойство)

jQuery .html() функцию можно заменить на element.innerHTML='...' один

Answer 2

window.addEventListener( 'scroll', () => {
    if( checkVisible( document.getElementById('target'))) {
        document.getElementById('something').innerHTML = 'HTML CONTENT';

        window.off('scroll');
    } else {
        //do nothing
    }
} )

function checkVisible(elm, eval) {
    eval = eval || "object visible";
    var viewportHeight = window.height();
    var scrolltop = window.scrollTop();
    var y = elm.offset().top;
    var elementHeight = elm.height();

    if (eval == "object visible")
        return (
            y < viewportHeight + scrolltop && y > scrolltop - elementHeight
        );
    if (eval == "above") return y < viewportHeight + scrolltop;
}