问题
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.
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.
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 (An example of the Infinite Scroll Shortcut Demo)
<!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>
回答1:
I was wanting to do the same type of thing and ended switching from Waypoints to Bullseye:
http://pixeltango.com/resources/web-development/jquery-bullseye-viewport-detection-events/
So you could do something like this:
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();
It will call your 'getMore' function every time the #waypoint element enters the viewport, so when it jumps down the page and then reenters you get a new callback!
Hope this helps.
回答2:
Managed to get this working. Thought i should share it here.
I used 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) Note the changes in instantiation of waypoint. (new Waypoint....)
(2) Call Waypoint.refreshAll() to refresh the waypoints after appended.
Hope it helps. Above code snippet is not tested, but theoretically should work.
Slay
来源：https://stackoverflow.com/questions/22845377/continuous-scrolling-with-jquery-waypoints