如何仅使用 html 和 javascript 进行无限滚动？ [关闭]答案

【问题标题】：How do I do Infinite Scrolling with just html and javascript? [closed]如何仅使用 html 和 javascript 进行无限滚动？ [关闭]
【发布时间】：2014-01-12 13:41:09
【问题描述】：

我有一个名为 home.html 的 html 文档。我希望在查看器向下滚动或滚动条到达底部时加载一个新的 html 文档。

但是，我看到的所有教程对我来说似乎都太高级了。我是一名学生，刚接触 javascript。

那么，如果可能的话，有没有人愿意指导我如何使用 html 和 javascript 创建一个超简单的无限滚动网页。我不懂php。

感谢您愿意提供的任何帮助。

【问题讨论】：

另外，我可以检查无限滚动是否在网站处于活动状态的情况下工作？
无限滚动并非易事，通常需要来自服务器端的数据馈送——这就是重点。如果您是 JavaScript 新手，最好先从其他东西开始
是的，我想的差不多，但无限滚动对于我正在处理的项目来说效果很好。至于需要服务器端数据馈送，有没有办法使用我自己的计算机作为服务器，只是为了让一些功能无限滚动工作。
是的，但是你仍然需要一种服务器端语言并设置一个 Web 服务器，这会打开许多全新的世界......也许如果你详细说明你想要做什么做，有人可能有一个想法。
查看endless.horse

标签： javascript html infinite-scroll

【解决方案1】：

仅作为起点

检测您何时位于页面底部可以使用 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'
           });
        }
    });

我不确定您打算如何获取无限量的数据？

来自 cmets 的第 2 部分

如果不更改谷歌浏览器本身，Chrome 不允许本地 ajax 请求。

在本地机器上最容易启动的 Web 服务器是 php Web 服务。下载 PHP 并创建 php.exe 的快捷方式，快捷方式的目标是

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

目录中的开始将是 html 的位置。 index.html 或 index.php 需要在目录的开头，http:// ... localhost 将拉起 index.php 或 index.html。我将开头留空，并将快捷方式复制到我想用作当前开发工作的本地主机的文件夹中。

PHP可以从http://php.net/下载

网络服务器的手册在这里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>

【讨论】：

我认为包括如何安装一些网络服务器超出了这个问题的范围。
是的，但是在cmets中添加了“有没有办法使用我自己的计算机作为服务器”。
我不需要真正“无限”的数据量。我只想在滚动条到达底部时加载一个新页面并将其添加到当前页面的末尾，而不是使用超链接在页面之间导航。大约有 5 页需要向下滚动。
看到没有 Ajax 使用 iframe 更容易，不需要本地服务器

【解决方案2】：

可能有多种方法可以实现这一点 - 但以下是一些基本步骤，可以让您大致了解：

在浏览器中打开您的 home.html 页面。该页面应该包含某种可以预先填充数据的列表（例如按字母顺序排序的电影列表）。
您开始向下滚动页面 - 试图查看列表中的最后一部电影。
当您接近底部时 - 在您的页面 (home.html) 中运行的脚本将检测到您接近底部，并将向另一个页面 (URL) 发出 AJAX 请求以检索下一组电影。
检索数据后，脚本将格式化并将更多项目添加到电影列表中 - 为观看者提供无限滚动的效果。

注意：以上内容可以使用纯 HTML 和 JavaScript 实现，您不需要任何服务器端代码 (PHP) 或实时托管。查看this very simple tutorial，它将通过一些代码示例引导您了解基础知识。

【讨论】：