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

[Nlk]

Ребят, скажите пожалуйста почему при событии onscroll аргументы функции showPage остаются неизменными?

document.addEventListener("scroll", eventScroll);

let lastScrolled = 0;
function eventScroll() {
    const scrolled = window.pageYOffset || document.documentElement.scrollTop;
	if (scrolled < lastScrolled) {
		showPage(pageIndex - 1);
	} else {
		showPage(pageIndex + 1);
	}
	lastScrolled = scrolled;
}

let pageIndex = 0;
showPage(pageIndex);

function showPage(n) {
	const pages = document.querySelectorAll('.page');
	pages[pageIndex].classList.add("active");
}

[рони]

Nlk,
макет сделайте минимальный

[Nlk]

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

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html, body{
	min-height: 100%;
}
body {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
    flex-direction: column;
}
.page {
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}
.page:nth-of-type(1) {
	background-color:red;
}
.page:nth-of-type(2) {
	background-color:green;
}
.page:nth-of-type(3) {
	background-color:yellow;
}
.page:nth-of-type(4) {
	background-color:gray;
}
.page:not(.active) {
	visibility: hidden !important;
	opacity: 0;
}


section {
	flex: 1 0 auto;
	height: 100vh;
	width: 100%;
	overflow: auto;
}

'use strict';
document.addEventListener("scroll", eventScroll);

let lastScrolled = 0;
function eventScroll() {
    const scrolled = window.pageYOffset || document.documentElement.scrollTop;
	if (scrolled < lastScrolled) {
		showPage(pageIndex - 1);
	} else {
		showPage(pageIndex + 1);
	}
	lastScrolled = scrolled;
}

let pageIndex = 0;
showPage(pageIndex);

function showPage(n) {
	const pages = document.querySelectorAll('.page');
	pages[pageIndex].classList.add("active");
}

[рони]

Nlk,
scroll происходит несколько раз, pageIndex никак не изменется ...
возможно вы хотели что-то такое ...(код правильный, но скорее всего не то что вам нужно)

window.addEventListener("DOMContentLoaded", function() {
  document.addEventListener("scroll", eventScroll);
  var pages = document.querySelectorAll(".page");
  var lastScrolled = 0;
  function showPage() {
    [].forEach.call(pages, function(el, i) {
      i == pageIndex ? el.classList.add("active") : el.classList.remove("active");
    });
  }
  var pageIndex = 0;
  showPage();
  function eventScroll() {
    var 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;
  }
});

[Nlk]

рони,
спасибо вам за хороший пример, помогло разобраться!

[Nlk]

рони,
скажите, а скрипты которые вы даёте здесь можно использовать в своих проектах?
К примеру popup https://javascript.ru/forum/misc/553...tml#post367958

[рони]

Nlk,
да

[рони]

Nlk,
работа с scroll
devote,
https://javascript.ru/forum/dom-wind...tml#post312682
Malleys,
http://javascript.ru/forum/showthrea...811#post439811

[Nlk]

рони,
спасибо за классный материал.
Столкнулся с трудностью не могу понять как реализован скролл на данном сайте без отображения полосы прокрутки..
https://html.nkdev.info/snow/home-9.html

[рони]

Nlk,
https://alvarotrigo.com/fullPage/examples/apple.html