文章/答案/技术大牛

发布

社区首页 >问答首页 >使用jquery方法点的连续滚动

问使用jquery方法点的连续滚动
EN

Stack Overflow用户

提问于 2014-04-03 17:56:49

回答 2查看 7.1K关注 0票数 0

我试图遵循这个所以回答来创建一个无限滚动技术。在我的示例代码中，为什么它不能工作？我想模拟每次我到达底部时都会加载内容。目前，它只起有限的作用。

在阅读了文档之后，我相信我没有正确地更新。我怀疑“触发点”的重新计算没有开火。我不知道如何使它发挥作用。

在我的示例中，我通过调用附加更多Divs的getMore()函数来模拟正在加载的新内容。我想要达到这样的效果:页面永远不会结束。

请参阅：小提琴

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>

jquery

jquery-waypoints

javascript

回答 2

Stack Overflow用户

发布于 2014-05-25 21:12:52

我想做同样的事情，结束了从路标到布尔塞耶的转换：

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‘函数，所以当它跳下页面，然后重新进入时，您将得到一个新的回调！

希望这能有所帮助。

票数 1

Stack Overflow用户

发布于 2015-03-20 02:07:59

设法让这件事奏效了。我想我应该在这里分享。

我使用了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()来刷新路径点。

希望能帮上忙。上面的代码片段没有经过测试，但理论上应该能工作。

宰杀

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22845377

复制

相似问题

问使用jquery方法点的连续滚动
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery方法点的连续滚动EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery方法点的连续滚动
EN