Как сделать, чтобы при появлении элемента на странице выполнялся скрипт?

Question

[pavuuuk]

У меня есть слайдер, и я хочу, чтобы при скроле на последнюю статью выполнялась функция загрузки других статей, как это сделать? Не JQuery

Comments

[Сережа Ахен]

Гугл lazy loading

Answer 1

[Сергей Сунцев]

Вешаете событие onscroll на элемент, в котором происходит скролл, и когда он достигает конца вызывайте событие загрузки других статей.

Comments

[pavuuuk]

Проблема в том, что при прокрутке слайдера не срабатывает событие onscroll

[Сергей Сунцев]

а как происходит прокрутка слайдера?

[pavuuuk]

Сергей Сунцев, Снизу слайдера есть ползунок, который перемещается механизмом drag and drop. Т.е. я нажимаю на него, он закрепляется, а когда двигаю высчитывается индекс в процентах, и по этому индексу двигается сам слайдер. Вот код(Эта функция выполняется, когда мышь зажата на ползунке(slider - англ.)):

// scrollBar - полоса прокрутки
// slider - ползунок
// container - контейнер статей
document.onmousemove = function(e) {

		let newLeft = e.pageX - scrollbarCoords.left - shiftX;

		if (newLeft < "0") {
			newLeft = "0"
		};

		if (newLeft > scrollbar.offsetWidth - slider.offsetWidth) {
			newLeft = scrollbar.offsetWidth - slider.offsetWidth;
		}

		let left    = parseFloat(slider.style.left); // Moving the slider in px
		let scrollPercent = (left * 100)/(scrollbar.offsetWidth - slider.offsetWidth); // Moving the slider in %
		let index = ((container.scrollWidth - container.offsetWidth)*scrollPercent)/100; // Moving the container in px

		container.style.transform = `translateX(-${index}px)`;
		slider.style.left = `${newLeft}px`;

		document.onselectstart = function() {
			return false;
		};

	}

[Сергей Сунцев]

Тут много способов, к прримеру, определить, что index === последнему элементу и если они равны, то вызывать отпределенное событие.
Последний элемент можно просто вычислить, посчитав кол-во элементов.