使用javascript滾動加載數據

我在我的頁面上顯示數據，當我點擊load more data按鈕時，它將在已顯示數據下方的同一頁面上加載更多數據。我想轉換此功能，以便在用戶向下滾動頁面時加載更多數據，而不是單擊load more data。這就是我所擁有的和我所嘗試過的。使用javascript滾動加載數據

HTML視圖

<section id="rosterImages"> 
    <section id="users"> 
     <div id="nameImage"> 
      <figure id="content" class="thumbnail"> 
       <img width="158" height="158" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/> 
       <figcaption> 
        <a title="Email" id="emailIcon" class="icon-envelope icon-white" data-bind="attr:{'href':'mailto:' + Email()}"></a> 
       </figcaption> 
      </figure> 
      </div> 
     </section> 
    </section>

的Javascript滾動

$(window).scroll(function (e) { 
     if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.7) { 
      $('#users').append(Next()); 
     } 
    });

Next方法

Next = function() { 
    var _page = $.views.Roster.ViewModel.CurrentPage() + 1; 
    $.views.Roster.ViewModel.CurrentPage(_page); 
    $.views.Roster.GetPage("/api/Roster", 9, _page); 
};

下一實現方法具如果我把它連接到一個按鈕，但沒有滾動，d的作品。

來源

2013-04-18 Masriyah

是不是很好，如果你嘗試加載數據時，用戶滾動對結束PAGE的，

然後你才能嘗試： -

<script> 
     $(window).scroll(function() { 
      //Will check if the user has reached bottom of a PAGE 
      if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
       alert('Just checking if End of the Scroll Works'); 
       $('#users').append(Next()); 
      } 
     }); 

    </script>

[更新] 我試着用同樣的$(document).ready(function() {));，和它的作品般的魅力： -

$(document).ready(function() { 
     // Handler for .ready() called. 
     $(window).scroll(function() { 
      alert("Scrollbar Initiated"); 
      //Will check if the user has reached bottom of a PAGE 
      if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
       alert("Scrollbar appended"); 
       $('#users').append(Next()); 
      } 
     }); 
    });

，我試過了完整的代碼是什麼升IKE如下： -

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
</head> 
<script> 
    $(document).ready(function() { 
     // Handler for .ready() called. 
     $(window).scroll(function() { 

      //Will check if the user has reached bottom of a PAGE 
      if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
       alert("Scrollbar appended"); 
       $('#users').append(Next()); 
      } 
     }); 

     Next = function() { 
      var text = "..............Appended to Lipsum......................"; 
      return text; 
     }; 
    }); 


</script> 
<body> 
    <div id="users"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed tellus mauris, non tincidunt libero. Nullam eros tellus, posuere sit amet tempus laoreet, mattis fringilla nisl. Maecenas commodo arcu ac mauris sagittis nec iaculis justo vulputate. Nulla eros justo, consectetur fringilla iaculis gravida, eleifend quis metus. Suspendisse ut ante justo. Proin mollis pellentesque elit, in eleifend erat rhoncus vel. Aenean magna odio, pharetra in rhoncus et, venenatis sed nunc. Mauris convallis, nunc et gravida sagittis, leo urna porttitor lacus, vel pellentesque felis arcu eu metus. Suspendisse eget neque id risus pharetra sollicitudin. 
     </p> 
     <p> 
      Fusce fermentum sollicitudin neque eu vestibulum. Donec adipiscing fermentum varius. Ut ut libero lacus, ut viverra dolor. Praesent bibendum elementum dui at consequat. Pellentesque pulvinar, lacus eu auctor aliquet, mi eros egestas orci, sit amet condimentum erat tortor nec felis. Aliquam erat volutpat. Donec fermentum molestie tempor. Donec non facilisis metus. Nam convallis tempor ipsum in scelerisque. Mauris cursus metus sed justo pretium fringilla. Nulla cursus scelerisque tellus vel ornare. Etiam sit amet sapien diam, ut commodo mi. Vestibulum nec enim id metus feugiat aliquet. Integer varius faucibus odio vel eleifend. Nunc convallis lectus at quam consequat ac accumsan nunc sodales. 
     </p> 
     <p> 
      Nunc elementum augue quis velit hendrerit vel aliquam dui porta. Pellentesque sollicitudin tincidunt elit ac cursus. Sed iaculis, magna facilisis tincidunt ultricies, risus augue semper est, sit amet cursus lectus arcu iaculis elit. Nullam in massa felis, sit amet tempus urna. Vestibulum condimentum urna quis tortor volutpat sodales. Nullam sed nisl est, eget pulvinar elit. Pellentesque sagittis congue urna, nec molestie quam lacinia nec. Ut rhoncus fringilla tellus, eget molestie nibh mattis quis. Nunc nec purus elit. Cras vitae felis ac arcu iaculis egestas. Pellentesque aliquet, urna et ultrices porta, metus arcu consequat neque, quis vehicula quam magna sed risus. Nulla a nunc neque, sed fermentum risus. Vestibulum pellentesque elementum suscipit. Nulla dolor massa, lacinia vel vulputate ac, eleifend eu odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc lacinia justo in ante ornare consequat. 
     </p> 
     <p> 
      Sed dapibus quam ut augue luctus rhoncus. Aliquam cursus semper velit ac feugiat. Nullam erat magna, adipiscing id pharetra vel, elementum ut odio. Phasellus facilisis, justo id adipiscing posuere, lectus tellus vehicula nunc, nec vulputate elit ligula vitae nisi. Nunc tristique velit et turpis viverra vel condimentum nibh varius. Vivamus magna ante, adipiscing et iaculis sed, rutrum sit amet diam. Nunc semper orci non risus rutrum eget ullamcorper nulla volutpat. Suspendisse auctor quam vitae nisl blandit vulputate. Praesent justo mi, condimentum non malesuada sit amet, molestie ac massa. Phasellus dictum tincidunt massa, sed dictum urna rutrum id. Praesent eu gravida risus. 
     </p> 
     <p> 
      Nullam et neque tortor, ut accumsan nisl. Nullam pulvinar fermentum velit, eu tristique arcu sollicitudin eget. Praesent rhoncus malesuada mauris at fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ac massa lacus, et eleifend turpis. Proin fringilla imperdiet eros at venenatis. Fusce eu tempor lorem. Morbi ipsum tortor, condimentum quis pretium posuere, scelerisque sed purus. Maecenas in augue nunc, et ultrices risus. Fusce convallis tempus varius. Pellentesque eget nulla magna, ac ornare nibh. Morbi euismod dolor et nisl molestie in ornare eros gravida. Praesent sit amet lorem hendrerit diam ultrices egestas nec quis felis. Suspendisse nec nisl erat, ut ornare risus. Nulla nec pretium sapien. 
     </p> 
     <p> 
      Proin urna tellus, commodo in rhoncus non, elementum aliquam nisl. In consequat pretium dolor vel sollicitudin. Aliquam quis mauris eu elit hendrerit ultrices a et justo. Phasellus nec sodales felis. Pellentesque venenatis mauris in magna fringilla vitae fringilla erat tempor. Proin posuere augue eu odio volutpat ultrices. Donec pulvinar interdum eros in auctor. Sed molestie, lacus id posuere elementum, erat odio eleifend ligula, vel euismod nibh libero sit amet dolor. Phasellus ac augue urna. Pellentesque feugiat suscipit semper. Pellentesque luctus tempus tincidunt. Ut scelerisque, eros et porta euismod, neque elit ornare quam, quis posuere sem nulla et velit. Nam purus neque, accumsan nec lacinia ut, varius vel arcu. Nullam at orci sem, et aliquet augue. Nam imperdiet suscipit feugiat. Suspendisse dictum mi eget magna commodo at tristique odio dictum. 
     </p> 
     <p> 
      Ut a magna nec nulla ultrices faucibus. Praesent et est est. Aliquam vulputate lobortis tincidunt. Phasellus rhoncus imperdiet aliquet. Nullam id mi neque, sit amet tristique urna. Integer adipiscing, ipsum vel vestibulum vulputate, nulla ipsum blandit orci, et elementum quam lorem vitae mauris. Quisque consectetur ornare euismod. Nam vel iaculis risus. Proin lobortis dignissim lacus, sed feugiat lacus ultrices quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
     </p> 
     <p> 
      Nullam bibendum posuere adipiscing. Suspendisse potenti. Praesent nisi sem, scelerisque et semper vitae, pulvinar eget nunc. Mauris ultrices ultricies sem, pulvinar convallis augue aliquet eu. Curabitur sed purus eu turpis congue egestas. Sed tempus orci quis elit hendrerit pretium. Nam dictum nibh non orci vestibulum elementum. Phasellus sit amet velit volutpat erat elementum venenatis. Quisque facilisis egestas libero, a gravida nibh rhoncus quis. Quisque risus diam, viverra eu lacinia eu, ultrices non eros. Curabitur placerat imperdiet neque, ut cursus purus posuere eu. Proin sed ipsum leo, vitae rutrum diam. Suspendisse placerat risus nec nisl adipiscing vitae sagittis ipsum hendrerit. Phasellus sollicitudin orci mauris, sit amet sollicitudin lectus. Vivamus et bibendum justo. 
     </p> 
     <p> 
      Duis sed metus ac mi fermentum congue in vel nisl. Integer nunc magna, pulvinar a venenatis a, accumsan varius libero. Integer facilisis urna non enim viverra a porttitor ante lobortis. Pellentesque pharetra gravida porttitor. Morbi iaculis nibh sed urna malesuada ac facilisis mi vestibulum. Praesent euismod aliquam laoreet. Praesent at dolor eget augue convallis viverra vel ut ante. Praesent dictum est et nisi dictum ut vestibulum erat ullamcorper. Donec aliquam, quam in euismod pulvinar, augue mauris gravida lorem, a porta nunc felis at felis. Nam eget libero urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean iaculis massa sed purus tempor eu laoreet odio venenatis. Integer ultrices felis id ante pharetra bibendum. Sed at lorem vitae nunc vestibulum egestas. Fusce vel malesuada neque. 
     </p> 
     <p> 
      Sed non pretium sem. Aliquam id elit malesuada mi commodo dignissim ac sit amet diam. Integer fringilla arcu id est tincidunt non vestibulum eros commodo. Sed dictum sapien in nisi dapibus id pretium ipsum rutrum. Nulla justo diam, auctor sit amet venenatis sed, volutpat non ante. Aenean eu tristique augue. Suspendisse nisl nibh, eleifend et adipiscing in, volutpat sed enim. Nunc eros urna, gravida vitae interdum eget, volutpat et ipsum. Suspendisse eget turpis varius magna pretium fermentum. Nam neque turpis, tristique ac semper eu, pellentesque sit amet dolor. Integer aliquam aliquam tortor, sit amet dignissim quam laoreet at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet mi augue. Maecenas pretium accumsan sollicitudin. 
     </p> 
     <p> 
      In at neque quam, sed sollicitudin eros. Praesent venenatis, neque quis molestie dapibus, nisl nibh tincidunt elit, sodales fermentum quam purus sed dolor. Nullam bibendum, nisl a scelerisque accumsan, dui nibh dapibus mi, ut pellentesque arcu massa aliquam lectus. Cras fermentum, libero eget pulvinar elementum, nibh orci fermentum justo, a bibendum lectus nisl sit amet felis. Mauris at lorem quis est auctor tristique. Quisque dui libero, congue vel fermentum vel, congue quis libero. Aenean cursus dolor at augue sodales rutrum. Aenean egestas vulputate nulla, at porta tortor venenatis id. Vivamus sit amet lectus vitae lorem pellentesque mollis sed a diam. Donec consectetur mi non sapien sagittis faucibus. Proin at lacus purus, in lobortis lorem. Praesent ac arcu justo, at elementum erat. Quisque vulputate accumsan turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tempor erat vel tellus pellentesque tincidunt. Duis dolor mi, placerat id molestie laoreet, semper ut nibh. 
     </p> 
     <p> 
      Suspendisse potenti. Sed eu risus dolor, vel semper libero. Sed accumsan est eget urna vulputate pretium. Integer varius venenatis quam. Praesent lacus diam, condimentum quis luctus in, convallis vitae est. Suspendisse potenti. Phasellus interdum mauris ut nisi feugiat sodales. Vivamus condimentum, leo sed placerat rhoncus, eros lacus ultricies sem, sit amet tempor libero nisl et lacus. In sed odio arcu. Proin id diam a lacus tristique posuere. Integer luctus urna et nulla ultrices interdum. 
     </p> 
     <p> 
      Vestibulum a eros quam, et laoreet nisi. Duis convallis tincidunt augue nec pulvinar. Nunc malesuada urna ut sem placerat consequat. Nulla sollicitudin venenatis quam sollicitudin gravida. Curabitur elementum quam sit amet dolor euismod non dapibus elit tincidunt. In turpis augue, luctus et iaculis a, molestie at risus. Praesent sit amet ante ac ipsum fringilla dignissim. Aliquam elit orci, feugiat faucibus laoreet eu, sodales interdum velit. Aliquam dolor mi, pharetra vel suscipit id, tempor eu arcu. Aliquam sem turpis, rutrum quis porta sed, faucibus quis eros. Proin quis varius velit. 
     </p> 



    </div> 


</body> 
</html>

來源

2013-04-18 03:20:00 Shubh

我想這個月底但即使警報沒有顯示任何內容，似乎也沒有多大作用。 – Masriyah 2013-04-18 03:28:23

請檢查您是否可以在$（document）.ready（function（）{..//Your code}）中使用它; [更新回答] – Shubh 2013-04-18 03:46:25

應該'id =「lipsum」'是id =「users」'？我現在會嘗試 – Masriyah 2013-04-18 03:55:01

我們只是實施了類似的東西，我們的方法幾乎一樣，除了檢查對方的回答，看看你實際上已經達到了頁面

<script> 
     $(window).scroll(function() { 
      //Will check if the user has reached bottom of a PAGE 
      //-10 makes it such that you don't have to scroll all the way to the bottom 
      //can be adjusted as needed for footers, etc, 
      if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) { 
       alert('Scrolling should be called now'); 
       $('#users').append(Next()); 
      } 
     }); 

    </script>

來源

2013-04-18 03:35:18 Tommy

我不確定，但它似乎沒有爲頁面做任何事情，並不確定可能導致問題的原因。 – Masriyah 2013-04-18 03:39:07

你確定你的頁面上沒有JS錯誤會阻止它被觸發嗎？ – Tommy 2013-04-18 04:07:38

我剛剛發現scrollTop並不適用於我的Chrome瀏覽器 - 它可以在IE和FF上運行。你碰巧知道有什麼解決辦法嗎？ – Masriyah 2013-04-18 04:12:46

使用javascript滾動加載數據

回答

相關問題