Nexus,
Допустим у меня сайта длиной 100%, мне нужно чтобы пользователь при прокручиваниии смог прокрутить весь сайт с начала до конца за 4 скрола. Может как то так, только на js window.scrollTop() + body.height() / 25 |
Цитата:
|
рони,
Извиняюсь, что ввёл в заблуждение излишней информацией. Перефразирую так, в независимости от длины моего сайта, мне нужно чтобы я его мог проскролить за четыре события скролом. Подобное можно реализовать? |
Nlk, что-то типа этого (Не довел до ума)?
https://jsfiddle.net/xu9swjj6/2/ |
Nexus,
очень помогли. Спасибо. |
Здравствуйте!
Хочу поздравить всех с наступающим Новым Годом! Скажите пожалуйста, не даёт мне покоя одно событие, почему отображение данных по координатам 'скрола' в разных браузерах отображается по разному. И как это исправить? Отлавливал 'скрол' с помощью данного выражения:
let scrolled = window.pageYOffset || document.documentElement.scrollTop;
document.getElementById('test_1').innerHTML = scrolled + 'px - Происходящий scroll';
document.getElementById('test_2').innerHTML = lastScrolled + 'px - Предыдущий scroll';
К примеру, результат при первом 'скроле' в Chrome: 100px - Происходящий scroll 0px - Предыдущий scroll ------------------------ ? К примеру, результат при первом 'скроле' в Firefox: 114px - Происходящий scroll 113px - Предыдущий scroll ---------------------- ? |
Цитата:
Цитата:
но возможно, вы не там траншею копать собрались:) |
|
Уточнение по заданному вопросу
Цитата:
Меня не смущает отсутствие стандарта по длине 'скрола' у разных браузеров. Дело в том, что к примеру в браузере Chrome при одном прокручивании страницы у меня происходит одно событие, а в Firefox за один 'скрол' целых шесть. Неплохое решение предложили вы ранее сделать просто задержку, но в последствии оказалось оно работает нестабильно. И потом, я очень понять почему так происходит. |
Цитата:
|
Nlk,
может сделать рефакторинг, вернутся к минимальному макету и сформулировать задачу по новой, возможно дверь где-то рядом. |
Цитата:
Ребята, подскажите пожалуйста. Очень долго уже ломаю голову) Проблема данного кода в том, что в некоторых браузерах, при единождом 'скроле' страницы, происходит сразу несколько событий. Поясню, в приведённом ниже коде при прокручивании страницы, должен активироваться последующийся блок кораллового цвета. Но в некоторых браузерах, при первом же 'скроле', у нас сразу активируется последний блок. По причине того, что за один 'скрол', класс .active успевает назначиться сразу всем последующим блокам, и остановиться на последнем.
<!DOCTYPE html><head><meta charset="UTF-8"><style>
body {min-height: 200vh;}
.page {height: 25vh; width: 100%; background: gray; border: 2px solid white;}
.active {background: coral;}
</style></head><body>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<script>'use strict';
window.addEventListener("DOMContentLoaded", function() {
document.addEventListener("scroll", eventScroll);
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 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;
}
});
</script></body></html>
|
Цитата:
ссылка снова на плавный скролл при нажатии на кнопки клавиатуры(вниз, вверх) |
Nlk,
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><style>
body {min-height: 200vh;}
.page {height: 25vh; width: 100%; background: gray; border: 2px solid white;}
.active {background: coral;}
</style></head><body>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<script>
window.addEventListener("DOMContentLoaded", function() {
document.addEventListener("scroll", eventScroll);
var pages = document.querySelectorAll(".page");
function showPage(pageIndex) {
[].forEach.call(pages, function(el, i) {
i === pageIndex ? el.classList.add("active") : el.classList.remove("active");
});
}
function eventScroll() {
for (var i = 0; i < pages.length; i++) {
if (0 < pages[i].getBoundingClientRect().top) {
break;
}
}
showPage(i);
}
eventScroll()
});
</script></body></html>
|
рони,
Заработало в Firefox, спасибо. Правда в Opera иногда прокручивает, но суть понятна спасибо большое, буду пробовать. |
Nlk,
if (-100 < pages[i].getBoundingClientRect().top) эксперементируйте. :) |
рони,
скажите пожалуйста, в приведённом ниже коде, помимо добавления класса к определённому элементу, можно ещё добавить другой класс к его двум соседним элементам справа и слева, используя методы nextElementSibling и previousElementSibling?
function showPage() {
[].forEach.call(pages, function(el, i) {
i == pageIndex ? el.classList.add("active") && el.nextElementSibling.classList.add("new") : el.classList.remove("active");
});
}
|
Nlk,
добавить можно, но как правильно отменить не знаю, алгоритм нужен или два цикла, первый для отмены всех классов второй для установки
function showPage() {
[].forEach.call(pages, function(el, i, p) {
el.classList.remove("active");
el.classList.remove("new");
});
[].forEach.call(pages, function(el, i, p) {
if(i == pageIndex ) {
el.classList.add("active");
el.nextElementSibling && el.nextElementSibling.classList.add("new");
el.previousElementSibling && el.previousElementSibling.classList.add("new");
/* или так
p[i-1] && p[i-1].classList.add("new");
p[i+1] && p[i+1].classList.add("new");
*/
}
});
}
|
рони,
огромное вам спасибо. Извините что так часто обращаюсь к вам за помощью. Но я снова с просьбой, когда я искал решение, касаемо уменьшения количества событий на один 'скрол' в браузере Mozilla. То натолкнулся на материал, про функцию debounce, которая не позволяет обработчику события выполниться более одного раза в заданный промежуток времени. Могу ли я проецировать это к своему коду и как? В интернете мне попался такой пример, но я не понимаю как могу его использовать:
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// Usage
var myEfficientFn = debounce(function() {
// All the taxing stuff you do
}, 250);
window.addEventListener('resize', myEfficientFn);
|
Nlk,
var myEfficientFn = debounce(eventScroll, 250); document.addEventListener("scroll", myEfficientFn ); |
рони,
спасибо. Работает) |
Ребята, объясните пожалуйста, почему так получается что при наведении курсора на область с position:fixed и прокручивании, страница остаётся неподвижной. А при наведении курсора в любую другую область сайта при скроле всё нормально прокручивается.
|
Nlk, можно пример?
https://jsfiddle.net/uyh6exyj/ |
В коде приведённом ниже скрыт скролл страницы, это нужно оставить.
|
Nlk,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Извиняюсь, поправил.
<!DOCTYPE html><html lang="ru"><head><meta charset="UTF-8"><style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body{
min-height: 100%;
}
body{
overflow: hidden;
}
.wrap {
overflow-y: scroll;
width: calc(100% + 9px);
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.page {
height: 100vh;
width: 100%;
}
.active {
position: fixed;
top: 0;
height: 100px;
}
.page:nth-of-type(1) {background-color:#cccccc;}
.page:nth-of-type(2) {background-color:#afafaf;}
.page:nth-of-type(3) {background-color:#737373;}
.page:nth-of-type(4) {background-color:#404040;}
</style></head><body>
<section class="wrap">
<section class="page active"></section>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
</section>
</body></html>
|
Альтернативное решение использовать position:sticky, правда его поддержка браузерами не так хороша.
|
Nlk, в какой ситуации потребовалось растягивать блок с контентом на весь экран и его потомка фиксировать сверху?
|
Nexus,
Full Page Slider, реализация может и своеобразная, но вопрос лишь в этом моменте. |
Nlk, не проще просто растянуть высоту обертки, отказавшись от её абсолютного позиционирования?
|
Nexus,
Буду пробовать, спасибо за совет! |
Скажите пожалуйста, а возможно с помощью js, элементу с свойством position:fixed насильно назначить другого родителя нежели viewport. Чтобы менять позиционирование не относительно окна браузера а относительно другого элемента родителя?
let parent = document.querySelector("wrap");
let child = document.querySelector("active");
parent.appendChild(child);
У меня 'ругается' что: Uncaught TypeError: Cannot read property 'appendChild' of null |
не лучше ли просто элементу задать позиционирование как :absolute? с помощью js
|
Nlk,
let parent = document.querySelector(".wrap");
let child = document.querySelector(".active");
parent.appendChild(child);
|
j0hnik,
К сожалению, свойство absolute не подходит для дальнейшей реализации кода. Dilettante_Pro, Спасибо исправил, но не смотря на это позиционирование осталось от viewport. Хочу попробовать вариант приведённый ниже, единственно не знаю как обращаться к классу active, ведь в начале загрузки страницы его нет, он добавляется впоследствии динамически по событию 'скрола'.
active && active.style.transform = "translateY("+wrap.scrollTop+"px)";
// или так
[].forEach.call(pages, function(el, i) {
if (el.classList.contains("active")) {
el.style.transform = "translateY("+wrap.scrollTop+"px)";
} else {};
|
:) можно не отвечать ... кто подскажет, что хочет сделать Nlk,?
|
рони,
:) я так понимаю, что экстрасенсов тут нет, и нужно приводить весь код. |
Цитата:
|
рони,
Каждый раз надеешься что дальше получиться завершить самому, но и за отсутствия опыта приходиться вновь и вновь обращаться за помощью. Сейчас все работает, спасибо вам, разместил по ссылке https://codecanyon.net/item/page-sli...lugin/22780197 |
Nlk,
не понимаю, видимо выпал из темы, ни оценить, ни подсказать не могу |
| Часовой пояс GMT +3, время: 10:41. |