Непрерывная прокрутка с путевыми точками jquery

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

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

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

См.: 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 (пример демонстрации быстрого доступа к бесконечной прокрутке)

<!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>

javascript jquery jquery-waypoints
person medokr    schedule 03.04.2014    source источник
comment
Взгляните на: iscrolljs.com   -  person Diodeus - James MacFarlane    schedule 03.04.2014
comment
Я посмотрю на это. Спасибо за предложение.   -  person medokr    schedule 03.04.2014
comment
привет @medokr, просто чтобы проверить, удалось ли тебе решить эту проблему в конечном итоге? Я столкнулся с аналогичной проблемой.   -  person Slay    schedule 19.03.2015
comment
привет @Slay, к сожалению, нет. Я решил не использовать этот инструмент после того, как не смог заставить его работать.   -  person medokr    schedule 19.03.2015
comment
@medokr спасибо за ответ. Удалось заставить его работать. ознакомьтесь с моим опубликованным решением ниже. надеюсь, что это поможет в будущих проектах. :D   -  person Slay    schedule 20.03.2015

Ответы (2)


arrow_upward
1
arrow_downward

Я хотел сделать то же самое и в итоге переключился с 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 входит в область просмотра, поэтому, когда он переходит вниз по странице, а затем возвращается, вы получаете новый обратный вызов!

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

person Hal Gatewood    schedule 25.05.2014

arrow_upward
1
arrow_downward

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

Я использовал jQuery Waypoints 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(), чтобы обновить путевые точки после добавления.

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

убить

person Slay    schedule 20.03.2015
comment
Вот JSFiddle, но getMore() вызывается более 1000 раз каждый раз, когда вы прокручиваете вниз, как ограничить это, чтобы getMore() вызывался только один раз для каждой прокрутки ниже путевой точки? Если вы закомментируете, Waypoint.refreshAll() getMore() будет вызываться только один раз, но обновление при прокрутке вниз будет очень медленным: jsfiddle .net/75g6cap2/45 - person Giant Elk; 09.08.2015
comment
привет @GiantElk только что увидел твой ответ. вы все еще ищете решение этой проблемы? - person Slay; 21.06.2016