Fuel UX 的无限滚动在没有 div 高度的情况下无法工作

Question

我在我的项目中使用 Bootstrap 和 Fuel UX v3.4.0，并尝试在我的整个页面上实现无限滚动。但是，我做不到。

我已经在 fiddle 中复制了 http://getfuelux.com/javascript.html#infinite-scroll 中的无限滚动示例，我注意到如果具有定义的高度，同样可以正常工作，否则会失败。

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');

http://jsfiddle.net/z5y41e9c/

我需要的是从上面的 fiddle 中删除 CSS，并在到达页面末尾时让无限滚动起作用。所以无限滚动应该与 http://jsfiddle.net/z5y41e9c/2/

一起使用

我是否需要按照 Fuel UX 文档使用 'helpers' 参数？它并没有解释太多，我不确定如何使用这个论点。如果您还可以解释如何使用此参数以供将来参考，我将不胜感激。

Answer 1

这不是 Fuel UX 的限制。尽管您确实需要一个小于高度内容的实际高度。如果没有，就不会有卷轴。

这里是两个 "full height" 无限滚动元素的示例。 http://jsfiddle.net/z5y41e9c/5/

这里是一个只有一个 "full height" 无限滚动元素的例子。 http://jsfiddle.net/m7q3h682/1/

唯一添加的是：

html, body {
  height: 100%;
}

Fuel UX 的无限滚动在没有 div 高度的情况下无法工作

Infinite scroll with Fuel UX not working without div height

html

css

jquery

twitter-bootstrap

fuelux