Ребят, скажите пожалуйста почему при событии 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,
макет сделайте минимальный |
<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;
}
});
|
рони,
спасибо вам за хороший пример, помогло разобраться! |
рони,
скажите, а скрипты которые вы даёте здесь можно использовать в своих проектах? К примеру 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 |
рони,
спасибо за классный материал. Столкнулся с трудностью не могу понять как реализован скролл на данном сайте без отображения полосы прокрутки.. https://html.nkdev.info/snow/home-9.html |
|
рони,
хотелось самому сделать, думал уже немного остаётся, лишь скролл убрать и плавные переходы. Но если вы порекомендовали библиотеку видимо там много заморочек для меня получиться? |
Nlk,
то что вы хотите сделать, ничем не отличается от слайдера, если вы ещё не делали "свой" слайдер, начните с вертикального слайдера. |
Ok. Спасибо. А касаемо отсутствующей полосы скрола, там видимо событие отлавливается иначе не по документу а по высоте слайда?
|
рони,
да и тот код с которым вы мне помогли ранее, это почти и есть слайдер за исключением тех нюансов которые я описал ранее со скролом. |
Цитата:
пример devote посмотрите внимательнее |
рони,
Дело в том что он не сработал в строенном просмотре на сайте и я не обратил внимание на этот скрипт, а зря то что нужно, спасибо. |
Цитата:
|
|
рони,
Скажите пожалуйста, в чем может быть причина уязвимости данного кода, с которым вы помогли. Дома всё прекрасно работает со всех браузеров, добавляет поочередно видимость к каждому блоку. А на работе проблемы с прокручиванием, смена слайдов происходит моментально с первого до последнего слайда. Разбирался с настройками колеса мыши ничего не помогло, пробовал с разных браузеров. Может preventDefault где нужно добавить?
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;
}
});
|
К примеру, с данным примером, который приводил ранее всё работает и дома и на работе: https://html.nkdev.info/snow/home-9.html
|
Цитата:
Цитата:
Цитата:
var timer;
document.addEventListener("scroll", function() {
window.clearInterval(timer);
timer = window.setTimeout(eventScroll, 100)
});
может поможет. |
рони,
С вашим опытом от концепции до практики тонкая грань) Всё заработало, спасибо. Единственно что, за счёт таймера немного резковато происходит смена слайдов, в независимости от добавленного transition. |
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,
на всякий случай. https://javascript.ru/forum/misc/719...tml#post473403 там стрелками, но похоже вам для скролл тоже самое нужно. |
рони,
спасибо, ознакомлюсь. |
рони,
скажите пожалуйста, событие scrolla можно назначать не только на глобальный объект window но и на отдельный элемент страницы, к примеру к div блоку по его id? В таком случае вместо window и document используется id? let scrolled = id.pageYOffset || id.documentElement.scrollTop; |
|
рони,
я установил overflow-y: scroll на определённом блоке и когда прокручиваю страницу в этой области все нормально скролит, но само событие scroll не отлавливается глобально. Почему так? |
Nlk,
не могу прокомментировать, может кто-то другой напишет |
рони,
а не могли бы касаемо предыдущего скрипта подсказать, обнаружил уязвимость при быстром прокручивании страницы ловит ближайшее событие а дальше уже скролл заканчивается. Не сталкивались с подобным? |
Nlk,
Цитата:
|
рони,
вы мне и так очень здорово помогли, спасибо. |
Цитата:
https://jsfiddle.net/xu9swjj6/ P.S. Возможно в примере я неправильно определяю высоту и отступ от верхнего края. |
Nexus,
Всё по полочкам, и с примером, спасибо большущее! Скажите пожалуйста, а можно ограничить перемещение скрола на определённый интервал. К примеру, ограничить всю длину сайта до 4 перемещений скрола в независимости от длины конкретного скрола. |
Nlk, не понял вопроса.
|
| Часовой пояс GMT +3, время: 01:12. |