Бесконечная прокрутка в обоих направлениях - вверх и вниз
Я пытаюсь создать страницу, которая представляет собой бесконечный цикл прокрутки вверх и вниз.
В настоящий момент я использую jquery, чтобы переместить содержимое с верхней части страницы на нижнюю. Это создает приятный безвкусный цикл при прокрутке вниз, но я бы хотел, чтобы он работал, когда пользователь также прокручивается.
Проблема заключается в том, что даже если контент размещен в отрицательном вертикальном пространстве на странице, прокрутка не будет распространяться на это пространство. Насколько мне известно, нет возможности переопределить это, поэтому я ищу работу с некоторыми типами работ.
У меня есть мысли об использовании javascript для отключения прокрутки и использования события прокрутки для перемещения элементов, но на странице уже имеется множество элементов с абсолютным расположением и анимации, поэтому я обеспокоен тем, что вы выполняете этот маршрут.
Любые другие выводы?
Ответы
Ответ 1
ОК... Я проработал.
Я адаптировал этот script, который мгновенно перемещает место прокрутки в верхнюю часть страницы, когда вы добираетесь до нижней и нижней когда вы достигнете вершины.
$(window).scroll(function() {
if ( $(window).scrollTop() >= 18830 ) {
$(window).scrollTop(201);
}
else if ( $(window).scrollTop() == 0 ) {
$(window).scrollTop(18629);
}
});
И затем я убедился, что содержание внизу и в верхней части страницы было идентичным. Я думал, что будет вспышка или что-то, когда это переселение произошло, но оно плавное!
Ответ 2
Любые другие выводы?
Видели эти?
5 jQuery бесконечные прокрутки демонстраций
jsfiddle, что я не могу найти происхождение. (я не писал и не знаю, кто это сделал)
Ответ 3
Клонирование вашего тела HTML два (или три) раза (в javascript или иначе). Начните страницу в средней копии вместо верхней, а затем вы можете обрабатывать прокрутку, как вам нравится.
Ответ 4
Решение, которое мне нравится лучше всего, this one (code), потому что он добавляет элементы внизу, пока не будет достигнуто дно, убедившись, что прокрутка остается непрерывной (даже с smooth прокрутка). Тем не менее, это не так хорошо работает на мобильных телефонах, где прокрутка может произойти довольно быстро. Я рекомендую Marijn Haverbeke замечательную статью о поддельных полосах прокрутки в CodeMirror, где он занимается подобными проблемами.
Я оставляю вас с некоторыми фрагментами.
Во-первых, некоторый фон. Почему мы хотим подделать полосу прокрутки для начала?
Чтобы сохранить отзывчивость при загрузке огромных документов, CodeMirror не отображает весь документ, а только ту часть, которая в настоящее время прокручивается в представлении. Это означает, что количество создаваемых узлов DOM ограничено размером окна просмотра, а ретрансляции браузера, вызванные изменениями текста, относительно дешевы.
И далее вниз...
Затем он прислушивается к событиям колес, но никогда не вызывает preventDefault на них или выполняет прокрутку в ответ на них. Вместо этого он реагирует, устанавливая тайм-аут, чтобы наблюдать количество пикселей, которое событие колеса прокручивало, и использует его для настройки его дельта-пиксельной скорости во время выполнения.
Ответ 5
Настроясь на ответ Махмуда, я взломал это через несколько минут.
Он работает несколько (по крайней мере, в Firefox) при прокрутке либо с помощью клавиш, либо с помощью колесика мыши, но при перетаскивании полосы прокрутки она становится глючной. В зависимости от того, как высота div связана с высотой видового экрана, могут произойти всевозможные фейерверки.
Тем не менее, я надеюсь, что это поможет вам в правильном направлении.
function onScroll(){
var SAFETY_MARGIN = 50,
scrollPos = $(this).scrollTop(),
docHeight = $(document.body).height(),
winHeight = $(window).height(),
firstDiv = $('body>div:first-child')[0],
lastDiv = $('body>div:last-child')[0],
lowerLimit = SAFETY_MARGIN,
higherLimit = docHeight - SAFETY_MARGIN;
// Scrolling too high
if( scrollPos <= lowerLimit ){
// Move content to top;
$(lastDiv).prependTo(document.body);
// Adjust scroll position to compensate
// for the new content at the top
$(window).scrollTop(scrollPos + $(lastDiv).height());
}
// Scrolling too low
else if( scrollPos + winHeight >= higherLimit ){
// Move content to bottom
$(firstDiv).appendTo(document.body);
// Adjust scroll position to compensate
// for the missing content at the top
$(window).scrollTop(scrollPos - $(firstDiv).height());
}
}
$(window).scroll(onScroll);
$(window).load(function(){
var $body = $(document.body);
$(window).scrollTop($body.height() / 2);
});
</script>
</head>
<body>
<div style="height: 600px; background-color: red"> </div>
<div style="height: 600px; background-color: green"> </div>
<div style="height: 600px; background-color: blue"> </div>
</body>
</html>
Ответ 6
Как многие из них предложили, если ваша страница не выглядит точно такой же, как сверху, а внизу вам нужно клонировать ваш контент, чтобы он выглядел так, как будто это происходит. Ive сделал пример, используя эту технику, которая работает довольно гладко:
/*
Ininite looping scroll.
Tested and works well in latest Chrome, Safari and Firefox.
*/
(function (window) {
'use strict';
var doc = document,
body = doc.body,
html = doc.documentElement,
startElement = doc.getElementsByClassName('is-start')[0],
clones = doc.getElementsByClassName('is-clone'),
disableScroll = false,
docHeight,
scrollPos,
clonesHeight,
i;
function getScrollPos() {
return (window.pageYOffset || html.scrollTop) - (html.clientTop || 0);
}
function getDocHeight() {
return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
}
function getClonesHeight() {
i = 0;
clonesHeight = 0;
for (i; i < clones.length; i += 1) {
clonesHeight = clonesHeight + clones[i].offsetHeight;
}
return clonesHeight;
}
docHeight = getDocHeight();
clonesHeight = getClonesHeight();
window.addEventListener('resize', function () {
scrollPos = getScrollPos();
docHeight = getDocHeight();
clonesHeight = getClonesHeight();
if (scrollPos <= 0) {
window.scroll(0, 1); // Scroll 1 pixel to allow upwards scrolling.
}
}, false);
window.addEventListener('scroll', function () {
if (disableScroll === false) {
scrollPos = getScrollPos();
if (clonesHeight + scrollPos >= docHeight) {
// Scroll to the top when you’ve reached the bottom
window.scroll(0, 1); // Scroll 1 pixel to allow upwards scrolling.
disableScroll = true;
} else if (scrollPos <= 0) {
// Scroll to the top of the clones when you reach the top.
window.scroll(0, docHeight - clonesHeight);
disableScroll = true;
}
if (disableScroll) {
// Disable scroll-repositioning for a while to avoid flickering.
window.setTimeout(function () {
disableScroll = false;
}, 100);
}
}
}, false);
// Needs a small delay in some browsers.
window.setTimeout(function () {
if (startElement) {
// Start at the middle of the starting block.
window.scroll(0, Math.round(startElement.getBoundingClientRect().top + document.body.scrollTop - (window.innerHeight - startElement.offsetHeight) / 2));
} else {
// Scroll 1 pixel to allow upwards scrolling.
window.scroll(0, 1);
}
});
}(this));
section {
position: relative;
text-align: center;
height: 80vh;
}
.red {
background: #FF4136;
}
.green {
background: #2ECC40;
}
.blue {
background: #0074D9;
}
.orange {
background: rebeccapurple;
}
h1 {
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
font-size: 5vw;
color: #fff;
text-transform: uppercase;
}
body {
font-family: "Avenir Next", Montserrat, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
}
::scrollbar {
display: none;
}
<section class="green">
<h1>One</h1>
</section>
<section class="red">
<h1>For</h1>
</section>
<section class="blue">
<h1>All</h1>
</section>
<section class="orange">
<h1>And</h1>
</section>
<section class="blue">
<h1>All</h1>
</section>
<section class="red">
<h1>For</h1>
</section>
<!--
These following blocks are the same as the first blocks to get that looping illusion going. You need to add clones to fill out a full viewport height.
-->
<section class="green is-clone is-start">
<h1>One</h1>
</section>
<section class="red is-clone">
<h1>For</h1>
</section>
