js如何實作頁面的捲軸下拉時載入更多（附程式碼）

這篇文章帶給大家的內容是關於js如何實現頁面的滾動條下拉時加載更多（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

在手機上，數據列表的分頁都是下拉到底部的時候會加載更多，但是，去年三月份的時候遇到了客戶要求web頁面也要下拉加載更多的需求，於是按照web頁面在滾動條下拉時加載更多內容（個人項目經驗）文中的代碼實現了這個下拉加載，很簡單的，代碼如下：

var totalPages;//总页数
var pageno = 0;//当前页数
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue == 0) {
           //do something
           if (pageno <p>但是，今天測試人員發現，當瀏覽器縮放了或螢幕顯示設定縮放時，就不能下拉載入了。時隔一年多，真是驚人@_@</p><p>經過調試，發現是有縮放時<code>positionValue</code>的值就無法等於0了，沒辦法繼續加載更多了，這時看到一篇文章下拉載入更多DEMO(js實作)中講到：</p>如果等滾動條拉到底部時再加載，會影響使用者體驗。因為一般動態載入的時候都需要向服務端請求資源，這時需要時間。一個更佳的方式是，當滾動條距離底部一定距離（C）時，就動態載入更多，向服務端請求資源。也就是預加載，預讀取。公式如下<br>this.scrollHeight - C == $(this).scrollTop() $(this).height()<p>看完後收到啟發，於是將positionValue的值設為大於等於-10，這裡的10也就是滾動條距離底部一定距離（C）的值。 <br>果然，沒問題了，有縮放時也可以正常實作下拉載入。 </p><p>於是，記錄下來，分享給大家，共勉。 </p><p>另外提醒一點，$(window).scroll(function()監聽滾動事件不執行這個問題中的採納答案提到：</p>html,body的高度樣式如果設定為100%，<code>$(window).scroll</code>方法將無法偵測到正確的滾出高度（0），導致捲動監聽事件失效，設定<code>html,body{ height:auto }</code>可以解決。<h1 id="程式碼">程式碼</h1><pre class="brush:php;toolbar:false">var totalPages;//总页数
var pageno = 0;//当前页数
var C = 10;//滚动条距离底部的距离
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue >= -C) {
           //do something
           if (pageno <p>相關推薦：</p><p><a href="http://www.php.cn/php-notebook-163188.html" target="_self">jQuery向下捲動即時載入內容實作的瀑布流效果，jquery向下捲動</a><br></p><p></p><a href="http://www.php.cn/js-tutorial-3562.html" target="_self">js實作捲軸滾動到頁面底部繼續載入_javascript技巧</a><p class="comments-box-content"></p>#

以上是js如何實作頁面的捲軸下拉時載入更多（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！