燃料UX無限滾動不工作沒有div高

我在我的項目中使用Bootstrap和Fuel UX v3.4.0並試圖實現無限滾動到我的整個頁面。但是，我無法做到這一點。燃料UX無限滾動不工作沒有div高

我已經從小提琴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/

什麼我需要是從去除CSS在小提琴之上，一個當你到達頁面結尾時，d有無限的滾動工作。所以無限滾動應該與http://jsfiddle.net/z5y41e9c/2/

我需要使用'助手'參數燃料用戶體驗文檔？它沒有多少解釋，我不知道如何使用這個論點。我會很感激，如果你還可以解釋如何使用這個論點作爲未來的參考。

來源

2015-01-14 Rits

爲什麼你沒有一個高度？如果您沒有提供高度，瀏覽器會自動將高度與內容匹配。也許嘗試使用'height：100％'？像這樣http://jsfiddle.net/z5y41e9c/3/ – gaynorvader

@gaynorvader只是我不想要一個頁面滾動和多個div卷軸。 – Rits

那麼'高度：100％'不起作用？ – gaynorvader

這不是Fuel UX的限制。儘管您確實需要比高度內容更小的實際高度。如果沒有，則不會滾動。

以下是兩個「全高」無限滾動元素的示例。 http://jsfiddle.net/z5y41e9c/5/

這是一個只有一個「全高」無限滾動元素的例子。 http://jsfiddle.net/m7q3h682/1/

增加一直是唯一的事情：

html, body { 
    height: 100%; 
}

來源

2015-01-14 15:02:51

你能不能告訴我，如何使用'幫手'的論點 - 可能有一個例子。提前致謝。 – Rits

輔助對象可讓您訪問'helpers.percentage'和'helpers.scrollTop'。這些讓你可以在滾動的同時訪問自己的位置。 'var helpers = {percentage：self.curPercentage，scrollTop：self.curScrollTop};' –

燃料UX無限滾動不工作沒有div高

回答

相關問題