Question

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

阅读文档后，我认为我没有正确刷新。我怀疑recalculation of the "trigger point"没有开火。我不确定如何使其发挥作用。

在我的示例中，我通过调用附加更多Div的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>

Answer 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'函数，所以当它跳过页面然后重新进入时你会得到一个新的回调！

希望这有帮助。

Answer 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）注意航点实例化的变化。（新Waypoint ....）

（2）调用Waypoint.refreshAll（）以在追加后刷新航点。

希望它有所帮助。上面的代码片段未经过测试，但理论上应该可以使用。

杀死

使用jquery航点连续滚动

2 个答案: