使用 jquery 航点连续滚动答案

【问题标题】：Continuous scrolling with jquery waypoints使用 jquery 航点连续滚动
【发布时间】：2014-04-03 17:56:49
【问题描述】：

我正在尝试遵循SO answer 来创建无限滚动技术。在我的示例代码中，为什么它不起作用？我想模拟每次到达底部时加载的内容。目前它的作用有限。

阅读文档后，我认为我没有正确刷新。我怀疑recalculation of the "trigger point" 没有开火。我不知道如何使它工作。

在我的示例中，我通过调用附加更多 Divs 的 getMore() 函数来模拟正在加载的新内容。我要实现页面永不结束的效果。

请看：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>

【问题讨论】：

看看：iscrolljs.com
我来看看。感谢您的建议。
嗨@medokr 只是为了检查您是否最终设法解决了它？我面临着类似的问题。
嗨@Slay，不幸的是没有。在无法使用此工具后，我决定不使用它。
@medokr 感谢您的回复。设法让它工作。在下面查看我发布的解决方案。希望它对未来的项目有所帮助。 :D

标签： javascript jquery jquery-waypoints

【解决方案1】：

我想做同样类型的事情并结束从 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();

每次#waypoint 元素进入视口时，它都会调用你的“getMore”函数，所以当它跳下页面然后重新进入时，你会得到一个新的回调！

希望这会有所帮助。

【讨论】：

【解决方案2】：

设法让这个工作。我想我应该在这里分享它。

我使用 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() 刷新航点。

希望对您有所帮助。以上代码 sn-p 未经测试，但理论上应该可以工作。

杀戮

【讨论】：

这是一个 JSFiddle，但每次向下滚动时都会调用 1000 多次 getMore()，如何限制这一点，所以 getMore() 只在航点下方的每个滚动中调用一次？如果注释掉Waypoint.refreshAll()getMore() 只会调用一次，但是向下滚动更多时的刷新确实很慢：jsfiddle.net/75g6cap2/45
嗨@GiantElk 刚刚看到您的回复。您还在寻找解决方案吗？