使用jquery航点连续滚动 [英] Continuous scrolling with jquery waypoints
问题描述
我正在尝试按照 SO答案创建无限滚动技术.在我的示例代码中，为什么它不起作用?我想模拟每次到达底部时都会加载的内容.目前，它只能使用有限的数量.
I am trying to follow this SO answer to create an infinite scrolling technique. In my example code, why is it not working? I would like to simulate that content be loaded each time I reach the bottom. Currently it only works a finite amount.
阅读文档后，我认为我没有正确刷新.我怀疑重新计算触发点" 没有触发.我不确定如何使其工作.
After reading docs I believe that I am not refreshing correctly. I suspect the recalculation of the "trigger point" isn't firing. I am not sure how to make it work.
在我的示例中，我通过调用附加更多Div的getMore()函数来模拟正在加载的新内容.我想达到页面永无止境的效果.
In my example, I am simulating new content being loaded by calling the getMore() function that appends more Divs . I want to achieve the effect that page never ends.
请参阅: jsfiddle
Please see: 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>
推荐答案
设法使它起作用.以为我应该在这里分享.
Managed to get this working. Thought i should share it here.
我使用了 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....)
(1) Note the changes in instantiation of waypoint. (new Waypoint....)
(2)附加后，调用Waypoint.refreshAll()刷新航路点.
(2) Call Waypoint.refreshAll() to refresh the waypoints after appended.
希望它会有所帮助.上面的代码段未经测试，但从理论上讲应该可以工作.
Hope it helps. Above code snippet is not tested, but theoretically should work.
杀死
这篇关于使用jquery航点连续滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
