我在我的元素中使用 Bootstrap 和 Fuel UX v3.4.0 并尝试对整个页面实现无限滚动。然而，我却无法做到这一点。
我已经复制了 http://getfuelux.com/javascript.html#infinite-scroll 中的无限滚动示例在 fiddle 中，我注意到，如果具有定义的高度，则同样可以正常工作，但否则会失败。
HTML:
<body class="fuelux">
<div class="infinitescroll" id="myInfiniteScroll1" style="border: 1px solid #ccc; border-radius: 4px; float: left; padding: 6px 10px; width: 48%;"></div>
<div class="infinitescroll" id="myInfiniteScroll2" style="border: 1px solid #ccc; border-radius: 4px; float: right; padding: 6px 10px; width: 48%;"></div>
<div style="clear:both;"></div>
CSS(高度):
#myInfiniteScroll1 {
height: 200px;
}
#myInfiniteScroll2 {
height: 200px;
}
JS:
var content = '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt auctor leo, ut ultricies lectus feugiat id. Duis sagittis erat id varius hendrerit. Etiam et hendrerit lectus. Nullam mattis, mauris vitae vestibulum gravida, enim ante adipiscing leo, sed imperdiet lacus dui bibendum erat. Sed convallis sed leo ac dapibus. Phasellus posuere lobortis euismod. Nam tempor elit ut justo tempor, eget egestas lectus sollicitudin. Cras vehicula sapien quis nisi ultricies rutrum. Nam ornare lorem mollis ullamcorper vestibulum.</p>' +
'<p>Nullam in vulputate erat, in mattis enim. Curabitur consequat velit a sem ornare adipiscing. Pellentesque nisl lectus, venenatis sed dui ut, placerat mollis urna. Nulla diam diam, consectetur et magna id, lobortis cursus risus. Curabitur feugiat purus sed massa imperdiet rutrum. Mauris eu sodales libero, eu ultrices orci. Nunc vel metus erat. Donec ornare bibendum leo id fermentum. Fusce nec justo consectetur, posuere elit ac, tincidunt odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>' +
'<p>Etiam et magna in dui convallis consectetur sit amet sed quam. Vestibulum non libero et justo porttitor cursus nec ac arcu. Aliquam feugiat non ipsum et interdum. Aenean ac lectus erat. Integer vulputate turpis ac accumsan fermentum. Curabitur nec feugiat enim. Nullam lobortis mauris odio, a commodo mauris facilisis quis. Praesent id dapibus lectus. Morbi id blandit magna. Quisque adipiscing viverra massa, vitae sagittis eros dignissim sed. Praesent ornare placerat malesuada. Quisque nec eros dictum, ornare erat non, fringilla felis. Proin sollicitudin arcu ac turpis euismod rhoncus.</p>';
var delays = ['300', '600', '900', '1200'];
var setup = function(selector){
$(selector).append(content + content + content);
$(selector).scrollTop(0);
};
$('#myInfiniteScroll1').infinitescroll({
dataSource: function(helpers, callback){
setTimeout(function(){
callback({ content: content });
}, delays[Math.floor(Math.random() * 4)]);
}
});
$('#myInfiniteScroll2').infinitescroll({
dataSource: function(helpers, callback){
setTimeout(function(){
callback({ content: content });
}, delays[Math.floor(Math.random() * 4)]);
},
hybrid: true
});
setup('#myInfiniteScroll1');
setup('#myInfiniteScroll2');
我需要的是从上面的 fiddle 中删除 CSS，并在到达页面末尾时进行无限滚动。所以无限滚动应该与 http://jsfiddle.net/z5y41e9c/2/ 一起使用
我需要根据 Fuel UX 文档使用“helpers”参数吗？它没有解释太多，我不知道如何使用这个论点。如果您也能解释一下如何使用这个论点以供将来引用，我将不胜感激。
最佳答案
这不是 Fuel UX 的限制。尽管您确实需要小于高度内容的实际高度。如果没有，就不会有卷轴。
这是两个“全高”无限滚动元素的示例。 http://jsfiddle.net/z5y41e9c/5/
这是一个只有一个“全高”无限滚动元素的示例。 http://jsfiddle.net/m7q3h682/1/
唯一添加的是:
html, body {
height: 100%;
}
关于jquery - 如果没有 div 高度，Fuel UX 的无限滚动将无法工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27941127/