如何使用html和javascript做無限滾動？

Question

我有一個名爲home.html的html文檔。我希望在查看器向下滾動或滾動條到達底部時加載新的HTML文檔。

但是，我所見過的所有教程對我來說似乎都太高級了。我是一名學生，也是JavaScript的新手。

那麼，有沒有人願意引導我如何創建一個超簡單的無限滾動網頁，只需html和javascript，如果可能的話。我不知道PHP。

感謝您願意提供的任何幫助。

Answer 1

很可能有不同的方式來實現這一點 - 但下面是一些基本的步驟，應該給你一個總體思路：

1. 在瀏覽器中打開你的網頁home.html的。該頁面應該包含某種可以預先填充數據的列表（例如，按字母順序排列的電影列表）。

2. 您開始向下滾動頁面 - 嘗試查看列表中的最後一部電影。當您接近底部時 - 在您的頁面中運行的腳本（home.html）會檢測到您已接近底部並將向另一頁（URL）發出AJAX請求以檢索下一組頁面電影。

3. 一旦數據已被檢索，腳本將格式化並追加更多項目到電影列表中 - 給觀衆一個無限滾動的效果。

注：以上可與普通的HTML和JavaScript來實現，你不需要任何服務器端代碼（PHP）或現場託管。查看this very simple tutorial，它會通過一些代碼示例來介紹基本知識。

Answer 2

作爲一個起點僅

當你在頁面底部的檢測可以使用jQuery這個代碼來完成。

$(window).scroll(function(){ 
    if ($(window).scrollTop() == $(document).height()-$(window).height()){ 
     alert("We're at the bottom of the page!!"); 
    } 
}); 

追加到身體的末端可以用Ajax調用

$(window).scroll(function(){ 
     if ($(window).scrollTop() == $(document).height()-$(window).height()){ 
      $.ajax({ 
       url: "your.html", 
       success: function (data) { $('body').append(data); }, 
       dataType: 'html' 
      }); 
     } 
    }); 

我不知道你打算如何獲取數據的無限量辦？

第2部分從評論

瀏覽器不允許在不更改谷歌瀏覽器本身的本地Ajax請求。

在本地機器上啓動的最簡單的web服務器是php web服務。下載PHP並創建php.exe的快捷方式，其目標是快捷方式爲

C:\PHP\php.exe -S Localhost:80 

目錄中的開頭將是html的位置。 index.html或索引。php需要在目錄中啓動並且http：// ... localhost會拉起index.php或index.html。我將開頭留空，並將快捷方式複製到我想用作當地主機的文件夾中以用於當前的開發工作。

PHP可以從http://php.net/

手動下載的Web服務器是在這裏http://www.php.net/manual/en/features.commandline.webserver.php

沒有Ajax

沒有無限數據（AJAX到PHP調用）更容易，沒必要爲jquery。 iframe可以附加到頁面的末尾而不需要本地服務器。

<div style="height:125%"> 
<h1>Chapter 1</h1> 
</div> 
<script> 
var page=1; 
window.onscroll = function(ev) { 
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { 
      ifrm = document.createElement("IFRAME"); 
     ifrm.setAttribute("src", page+".html"); 
     ifrm.style.width = 100+"%"; 
     ifrm.style.height = 800+"px"; 
     document.body.appendChild(ifrm); 
     page++ 
    } 
}; 
</script>