如何仅使用html和javascript进行无限滚动? [英] How do I do Infinite Scrolling with just html and javascript?

问题描述

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

I have an html document called home.html. And I want a new html document to be loaded when the viewer scrolls down or the scroller reaches the bottom.

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

However, all the tutorials I have seen have seemed too advanced for me. I am a student and new to javascript.

那么，有没有人愿意指导我如何使用html和javascript创建一个超简单的无限滚动网页.我不知道php.

So, is there anyone willing to walk me through how to create an ultra simple infinite scrolling webpage with just html and javascript if possible. I do not know php.

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

Thanks for any help you are willing to offer.

推荐答案

仅作为起点

使用jQuery的此代码可以完成对页面底部位置的检测.

Detecting when you are at the bottom of the page can be done with this code using jQuery.

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

可以通过ajax调用将其附加到正文末尾

Appending to the end of the body can be done with an ajax call

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

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

I'm not sure how you intend to get a limitless amount of data?

评论的第二部分

Chrome浏览器不允许在不更改Google Chrome本身的情况下进行本地Ajax请求.

Chrome doesn't allow local ajax requests without a change to google chrome itself.

最容易在本地计算机上启动的Web服务器是php Web服务.下载PHP并创建一个指向php.exe的快捷方式，该快捷方式的目标为

The easiest web server to start on a local machine is php web service. Download PHP and create a shortcut to the php.exe with the target of the shortcut being

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

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

The start in directory would be the location of the html. index.html or index.php need to be in the start in directory and http:// ... localhost will pull up index.php or index.html. I leave the start in blank and copy the shortcut into the folder I want to use as my localhost for my current dev work.

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

网络服务器的手册在 http://www.php.net/manual/zh/features.commandline.webserver.php

没有Ajax

没有无限的数据(从ajax到PHP的调用)，它更加容易，并且不需要jquery.可以将iframe附加到页面的末尾，而无需本地服务器.

Without infinite data (ajax to PHP calls) it is easier, and no need for jquery. iframes can be appended to the end of the page without needing a local server.

<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>

这篇关于如何仅使用html和javascript进行无限滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！