关于infinitescroll extraScrollPx参数无效的问题
当不写入extraScrollPx参数时,在firefox和chrome中都出现了只要下拉滚动条就会触发载入新的数据,而不是默认的当滚动条离屏幕底部150px才会触发.
但当写入extraScrollPx参数时,无论后面加是数字是多少,都出现只要下拉滚动条,就会触发载入新的数据,而且是无限载入,就像一直有人在拖滚动条一样.
这会是哪里出问题了.应该怎么调试?
html
<!-- Primary Content Starts -->
<div class="col-md-9">
<div class="row w-container" >
<div class="waterfall">
<div class="product-col" style="width: 250px;">
<div class="image">
<a href ="" alt="product" class="img-responsive"></a>
</div>
<div class="title">
<a href =""> <h4>Propet Wall Street Mens Dress Shoes</h4></a>
</div>
</div>
<!-- Product Grid Display Ends -->
</div>
<!-- Primary Content Ends -->
</div>
</div>
<div id="navigation"><a href="page=1"></a></div>
js
$(function(){
var $container = $('.w-container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.product-col',
gutter : 20,
columnWidth: 250,
isAnimated: true,
isFitWidth: true, //自适应宽度
isResizableL:true
});
});
$('.waterfall').infinitescroll({
navSelector: '#navigation',
nextSelector: '#navigation a',
itemSelector: '.product-col',
debug: true,
errorCallback: function() {
console.log('error');
},
//dataType: 'html',
dataType: 'json',
template: function(data) {
//从服务器返回的json数据在此处理成html,然后返回给函数
var tem = '';
$.each(data, function(key, value) {
//fixme:html拼接而成,有待优化
//处理成html返回
})
console.log(tem);
return tem;
},
loading: {
msgText: 'loading',
finishedMsg: 'finished',
selector: '.loading'
}
}, function(newElems) {
var $newElems = $(newElems).css({opacity: 0});
$container.imagesLoaded(function(){
$newElems.animate({ opacity: 1});
$container.masonry('appended', $newElems);
});
});
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在文档的最前面加个文档的声明即可<!doctype html>，主要原因是scroll高度的计算问题