Выборка элементов querySelectorAll

[рони]

Дома всё прекрасно работает со всех браузеров,

не понимаю как он смог у вас заработать это было что-то вроде концепции ... которую нужно доводить до ума...

scroll происходит несколько раз,

document.addEventListener("scroll", eventScroll);

замените на

var timer;
  document.addEventListener("scroll", function() {
  window.clearInterval(timer);
  timer = window.setTimeout(eventScroll, 100)
});

может поможет.

[Nlk]

рони,
С вашим опытом от концепции до практики тонкая грань)
Всё заработало, спасибо. Единственно что, за счёт таймера немного резковато происходит смена слайдов, в независимости от добавленного transition.

[рони]

Nlk,
возьмите плагин и не мучайтесь.

[Nlk]

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

[Nlk]

Скажите пожалуйста, как отловить событие нижней точки элемента? В коде отметил место где делал попытки.

window.addEventListener("DOMContentLoaded", function() {
	/*document.addEventListener("scroll", eventScroll);*/
	let timer;
	document.addEventListener("scroll", function() {
		window.clearInterval(timer);
		timer = window.setTimeout(eventScroll, 100)
	});
		
	const pages = document.querySelectorAll(".page");
	let lastScrolled = 0;
		function showPage() {
		[].forEach.call(pages, function(el, i) {
			i == pageIndex ? el.classList.add("active") : el.classList.remove("active");
			// моя попытка
			let bottomPage = pages[i].getBoundingClientRect().bottom + window.pageYOffset;
			if (window.pageYOffset < bottomPage) {
				alert("hello");
				} else if (window.pageYOffset > bottomPage) {
				alert("bye");
			}
			// конец попытки
		});
	}
	let pageIndex = 0;
	
	showPage();
	function eventScroll() {
		let scrolled = window.pageYOffset || document.documentElement.scrollTop;
		if (scrolled < lastScrolled) {
			--pageIndex;
		} else {
			++pageIndex;
		}
		pageIndex < 0 && (pageIndex = 0);
		pageIndex > pages.length - 1 && (pageIndex = pages.length - 1);
		showPage();
		lastScrolled = scrolled;
	}
});

<section class="page"></section>
	<section class="page"></section>
	<section class="page"></section>
	<section class="page"></section>

[Nlk]

Хочу пояснить, событие скрола имел в виду.

[рони]

Nlk,
не осилил

[Nlk]

рони,
Иногда сомнения одолевают, что застопорился и зря время трачу и в итоге ничего не получиться. И как дурачок, так долго делаю всего один скрипт.

[рони]

Nlk,
на всякий случай.
https://javascript.ru/forum/misc/719...tml#post473403
там стрелками, но похоже вам для скролл тоже самое нужно.

[Nlk]

рони,
спасибо, ознакомлюсь.