Бесконечная прокрутка в обоих направлениях - вверх и вниз - программирование

Бесконечная прокрутка в обоих направлениях - вверх и вниз

Я пытаюсь создать страницу, которая представляет собой бесконечный цикл прокрутки вверх и вниз.

В настоящий момент я использую jquery, чтобы переместить содержимое с верхней части страницы на нижнюю. Это создает приятный безвкусный цикл при прокрутке вниз, но я бы хотел, чтобы он работал, когда пользователь также прокручивается.

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

У меня есть мысли об использовании javascript для отключения прокрутки и использования события прокрутки для перемещения элементов, но на странице уже имеется множество элементов с абсолютным расположением и анимации, поэтому я обеспокоен тем, что вы выполняете этот маршрут.

Любые другие выводы?

4b9b3361

ОТВЕТЫ

Ответ 1

ОК... Я проработал.

Я адаптировал этот script, который мгновенно перемещает место прокрутки в верхнюю часть страницы, когда вы добираетесь до нижней и нижней когда вы достигнете вершины.

$(window).scroll(function() {
    if ( $(window).scrollTop() >= 18830 ) {
        $(window).scrollTop(201);
    }
    else if ( $(window).scrollTop() == 0 ) {
        $(window).scrollTop(18629);
    }    
});

И затем я убедился, что содержание внизу и в верхней части страницы было идентичным. Я думал, что будет вспышка или что-то, когда это переселение произошло, но оно плавное!

Ответ 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">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</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>