Непрерывная прокрутка с помощью jquery waypoints

Question

Непрерывная прокрутка с помощью jquery waypoints

0

Я пытаюсь следовать этому SO-ответу, чтобы создать бесконечную технику прокрутки. В моем примере кода, почему он не работает? Я хотел бы имитировать, что содержимое загружается каждый раз, когда я достигаю дна. В настоящее время он работает только на конечной сумме.

После чтения документов я считаю, что я не освежаю правильно. Я подозреваю, что пересчет "триггерной точки" не срабатывает. Я не уверен, как заставить его работать.

В моем примере я имитирую новый загружаемый контент, вызывая функцию getMore(), которая добавляет больше Divs. Я хочу добиться эффекта, который никогда не заканчивается.

Посмотрите: jsfiddle

HTML:

<div class="viewport">
    <div class="viewport-content">
        <div id="messages">
            <p>Some text here.</p>
            <p>Some text here.</p>
            <p>Some text here.</p>
            <p>Some text here.</p>
        </div>
        <div id="waypoint"></div>
    </div>
</div>

Javascript:

$(document).ready(function() {

    var pageId=0;
    $("#waypoint").waypoint(function(direction) {
        if (direction === 'down') {
            getMore(++pageId);
        }
    }, {
        context: '.viewport .viewport-content',
        offset: 'bottom-in-view'
    });

    function getMore(myPageId) {
        console.log("Loading page " + myPageId);
        for (var i=1; i<11; i++) {
            $("#messages").append("<p>Page " + myPageId + ". Row " + i + ".</p>");
        }

        $.waypoints('refresh');
    }
});

demo.html (пример демонстрации ярлыка Infinite Scroll)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
                * {
      margin:0;
      padding:0;
    }

    body {
      font-size:16px;
      line-height:1.5;
      color:#6a6272;
      background:#d5c5e5;
      padding-bottom:16px;
      font-family:"Lato", sans-serif;
    }

    .inner {
      width:460px;
      padding:0 10px;
      margin:0 auto;
    }

    h1, h2, h3, h4 {
      font-family:"PT Serif", serif;
      font-weight:normal;
    }

    h1 {
      font-size:53px;
      color:#444a50;
    }

    h2 {
      text-align:center;
      background:#6a6272;
      color:#eae2f2;
      font-size:24px;
    }

    pre {
      white-space:pre-wrap;
      font-size:14px;
      background:#fff;
      padding:10px;
    }

    code {
      font-family:"Ubuntu Mono", monospace;
    }

    p, pre, ul, .example, dl {
      margin-top:16px;
    }

    h3 {
      font-size:24px;
    }

    ol {
      margin-left:12px;
    }

    li {
      margin-top:6px;
    }

    .steps {
      background:#6a6272;
      color:#eae2f2;
      padding:16px 0;
      margin-top:16px;
    }

    .options {
      background:#6a6272;
      color:#eae2f2;
      padding:16px 0;
      margin-top:16px;
    }

    dt {
      font-weight:bold;
      color:#fff;
      margin-top:6px;
    }

    dd {
      margin-left:16px;
    }

    .fn {
      color:#111;
    }
    .kw {
      color:#a33;
    }
    .str {
      color:#3a3;
    }
    .cm {
      color:#33a;
    }
    .key {
      color:#939;
    }

    p code, li code, dl code {
      padding:0 2px;
      background:#eae2f2;
    }

    .steps li code, .options dl code {
      background:#444a50;
    }

    .options strong, .steps strong {
      color:#fff;
    }

    pre code {
      color:#888;
    }

    .infinite-container {
      width:480px;
      margin-left:-20px;
      overflow:hidden;
      position:relative;
    }

    .infinite-container.infinite-loading:after {
      content:"Loading...";
      height:30px;
      line-height:30px;
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      text-align:center;
      background:#6a6272;
      color:#eae2f2;
    }

    .infinite-item {
      float:left;
      width:100px;
      height:100px;
      background:#444a50;
      margin:20px 0 20px 20px;
    }
    .infinite-item:nth-child(3n) {
      background:#6a6272;
    }
    .infinite-item:nth-child(3n+1) {
      background:#eae2f2;
    }

    .infinite-more-link {
      visibility:hidden;
    }

        </style>
    </head>
    <body>
    <div class="inner example">
        <h3>Example</h3>
            <div class="infinite-container">
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
                <div class="infinite-item"></div>
            </div>
            <a href="demo.html" class="infinite-more-link">More</a>
        </div>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript" src="http://imakewebthings.com/jquery-waypoints/waypoints.js"></script>
    <script type="text/javascript" src="http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/waypoints-infinite.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.infinite-container').waypoint('infinite');
            });
        </script>
    </body>
</html>

medokr 03 апр. 2014, в 20:28

Источник

Теги:

javascript

jquery

jquery-waypoints

2 ответа

Ещё вопросы

Slay · Answer 1 · 2015-03-19T23-52-00.000Z

Удалось добиться этого. Думаю, я должен поделиться им здесь.

Я использовал путевые точки jQuery 3.1.1

$(document).ready(function() {
    var pageId=0;
    var waypoint = new Waypoint({
        element: $("#waypoint"),
        handler: function(direction) {
            if (direction === 'down') {
                getMore(++pageId);
                Waypoint.refreshAll();
            }
        },
        offset: 'bottom-in-view'
    });

    function getMore(myPageId) {
        console.log("Loading page " + myPageId);
        for (var i=1; i<11; i++) {
            $("#messages").append("<p>Page " + myPageId + ". Row " + i + ".</p>");
        }
    }
});

(1) Обратите внимание на изменения в создании путевой точки. (новая путевая точка....)

(2) Вызовите Waypoint.refreshAll(), чтобы обновить путевые точки после добавления.

Надеюсь, поможет. Над фрагментом кода не тестируется, но теоретически он должен работать.

сражать

Вот JSFiddle, но getMore () вызывается 1000+ раз при каждой прокрутке вниз, как это ограничить, чтобы getMore () вызывал get только один раз для каждой прокрутки ниже путевой точки? Если вы закомментируете Waypoint.refreshAll() getMore () вызывается только один раз, но обновление при прокрутке вниз действительно медленное: jsfiddle.net/75g6cap2/45
привет @GiantElk только что увидел твой ответ. Вы все еще ищете решение этой проблемы?

Hal Gatewood · Answer 2 · 2014-05-25T19-49-00.000Z

Я хотел сделать то же самое и закончил переход от Waypoints к Bullseye:

http://pixeltango.com/resources/web-development/jquery-bullseye-viewport-detection-events/

Поэтому вы можете сделать что-то вроде этого:

var myPageId = 1;
function getMore(e)
{
  for (var i=1; i<11; i++)
  {
    $("#messages").append("<p>Page " + myPageId + ". Row " + i + ".</p>");
  }
  myPageId++;
}

$('#waypoint').bind('enterviewport', getMore ).bullseye();

Он будет называть вашу функцию getMore каждый раз, когда элемент #waypoint входит в область просмотра, поэтому, когда он перескакивает вниз, а затем повторно появляется новый обратный вызов!

Надеюсь это поможет.