通过AutoPagerize的Infinite Scroll WebSite-Hacky，但是开始很酷

One of the things I like the most about Bing Image search (one of the things I prefer about it) is the "infinite scroll" feature. If you search for an image and start scrolling, it'll just keep going and going, moving the scroll bar each time and appending new images on the bottom. This concept of "infinite scroll" has been called just that, as well as endless pages, autopagerize, etc. There's even a jQuery plugin called Infinite Scroll if you want to enable something like this on your site programmatically.

我最喜欢Bing Image搜索的一件事(我喜欢的一件事)是“无限滚动”功能。 如果您搜索图像并开始滚动，它将不断前进，每次移动滚动条并在底部添加新图像。 这种“无限滚动”的概念以及无穷页面，自动分页等等已被称为。如果您想以编程方式在网站上启用类似的功能，甚至还有一个名为Infinite Scroll的jQuery插件。

However, there's also been a quiet revolution on sites, and to some extent, in browsers to make infinite scroll a standard thing. At least, a de facto standard, and you can enable it on your site with minimal effort.

但是，在站点上以及某种程度上在浏览器中进行了一场无声的革命，以使无限滚动成为一种标准。 至少，这是事实上的标准，您可以轻松地在站点上启用它。

The general idea is that the browser notices that you're scrolling to the end and rather than making you click, it'll fetch the next page via AJAX and append it to the page you're already on. This screenshot from the AutoPagerize for Chrome extension shows it best:

通常的想法是，浏览器会注意到您正在滚动到末尾，而不是单击鼠标，而是通过AJAX获取下一页并将其附加到您已经在其上的页面上。 以下是AutoPagerize for Chrome扩展程序的屏幕截图，显示得最好：

There's a few things needed and it requires a bit of dancing on your part to make it happen.

需要做一些事情，这需要您自己跳一点舞才能实现。

启用自动分页作为Web浏览器 (Enabling Autopagerize as a Browser of the Web)

For the longest time Autopagerize has been a "Greasemonkey script." Greasemonkey is an add-on itself that enable others add-ons, via easy scripts, to dramatically change the behavior of your browser. I'm not a huge fan myself, as I have some security concerns. The main site that promotes this is a bit dodgy looking, at http://autopagerize.net/ but their Extension for FireFox works and they mean well.

最长的时间，Autopagerize一直是“ Greasemonkey脚本”。 Greasemonkey本身就是一个附加组件，它使其他附加组件可以通过简单的脚本来显着改变浏览器的行为。 我本人并不是超级粉丝，因为我有一些安全方面的顾虑。 宣传此内容的主要网站http://autopagerize.net/看上去有点晦涩难懂，但它们的FireFox扩展程序有效，而且含义很好。

在Firefox上启用自动分页 (Enabling Autopagerize on Firefox)

You can use GreaseMonkey and the AutoPagerize userscript if you like, but I use the AutoPagerize Firefox Extension from http://autopagerize.net/.

如果愿意，可以使用GreaseMonkey和AutoPagerize用户脚本，但是我使用的是http://autopagerize.net/中的AutoPagerize Firefox扩展。

在Opera上启用自动分页 (Enabling Autopagerize on Opera)

Opera supports "User JavaScript" out of the box, so you can get their oAutoPagerize script, follow some directions and you're all set. It's a modification of the standard GreaseMonkey script and it will work with Safari and GreaseKit and Chrome, although I recommend the cleaner Chrome extension.

Opera提供了开箱即用的“用户JavaScript”，因此您可以获取他们的oAutoPagerize脚本，按照某些说明进行操作，然后就一切就绪。 这是对标准GreaseMonkey脚本的修改，可以与Safari和GreaseKit和Chrome一起使用，尽管我建议使用更干净的Chrome扩展程序。

在Chrome上启用自动分页 (Enabling Autopagerize on Chrome)

Chrome has a Chrome Extension called, logically enough, AutoPagerize for Chrome. It has the benefit of a small colored square in the address bar that will show you if the current page is enabled for paging and the current status.

Chrome具有一个Chrome扩展程序，从逻辑上讲，该扩展程序称为AutoPagerize for Chrome 。 它具有地址栏中小的彩色正方形的优点，该正方形将向您显示是否启用了当前页面的分页和当前状态。

I'm still looking into a reliable way to do this on IE, but you can start with the older GreaseMonkey for IE addon.

我仍在寻找在IE上执行此操作的可靠方法，但是您可以从IE插件的较旧GreaseMonkey开始。

启用自动分页为网站(博客等)发布者 (Enabling Autopagerize as a Web Site (Blog, etc) Publisher)

Here's what it gets insane. Like "horribly gross and this will never scale" insane. There's two ways. If there are children in the room who design for the web, please ask them to leave.

这就是疯了。 就像“可怕的毛骨悚然，这将永远不会扩大规模”一样疯狂。 有两种方法。 如果房间里有专门为网络设计的孩子，请让他们离开。

First, you can go to this online database of sites http://wedata.net/databases/AutoPagerize/items and add your site along with some *cough* regular expressions and XPath expressions that describe where the next page to retrieve is and what to append it to. Wow, Regular Expressions AND XPath? What, no "select * from authors"? And a centralized database. Good times.

首先，您可以转到站点的在线数据库http://wedata.net/databases/AutoPagerize/items，然后将您的站点与一些* cough *正则表达式和XPath表达式一起添加，这些表达式描述了要检索的下一页的位置以及内容。附加到。 哇，正则表达式和XPath？ 什么，没有“从作者中选择*”？ 和一个集中的数据库。 美好时光。

Well, my record (and most DasBlog sites) looks like:

好吧，我的记录(和大多数DasBlog网站)看起来像：

pageElement: id("blog-posts")

pageElement： id(“ blog-posts”)

url: ^http://www\.hanselman\.com/

网址： ^ http：// www \ .hanselman \ .com /

nextLink: //div[@class="previous-posts"]/a

nextLink： // div [@ class =“ previous-posts”] / a

It basically says, you can find the next link at the anchor after the div with the class "previous posts" and you can append it to the element with the id of "blog-posts."

基本上是说，您可以在div之后的锚点找到具有“ previous posts”类的下一个链接，并且可以将其附加到id为“ blog-posts”的元素上。

So this is gross.

因此，这很糟糕。

Second option, and more ideally, I'd say, is this microformat. I'll actually copy/paste the microformat from the GreaseMonkey script itself as it says it all:

第二种选择，更理想的是，我会说这种微格式。 实际上，我将从GreaseMonkey脚本本身复制/粘贴微格式，因为它说明了一切：

var MICROFORMAT = {
    url:          '.*',
    nextLink:     '//a[@rel="next"] | //link[@rel="next"]',
    insertBefore: '//*[contains(@class, "autopagerize_insert_before")]',
    pageElement:  '//*[contains(@class, "autopagerize_page_element")]',
}

It says, find either an anchor like <a href="..." rel="next"> or a link in the head like <link rel="next" href="..."> then retrieve the page. Take the element with class "autopagerize_page_element" and append it to the element with "autopagerize_insert_before."

它说，找到诸如<a href="..." rel="next">之类的锚点或像<link rel =“ next” href =“ ...”>之类的头部中的链接，然后检索页面。 取得具有“ autopagerize_page_element”类的元素，并将其附加到具有“ autopagerize_insert_before”的元素。

If your site/blog just adds a few classes and this rel, it'll be automatically setup to support autopagerize. I wanted to site my site like this but I hit a wall in the extensibility of DasBlog, the blog engine I run. This would be a small change to DasBlog, but it would mean a new version.

如果您的站点/博客仅添加了几个类并且与此相关，它将自动设置为支持autopagerize。 我想像这样放置我的网站，但是我在运行的博客引擎DasBlog的可扩展性方面遇到了麻烦。 这将是对DasBlog的很小的变化，但这将意味着一个新版本。

Of course, no browser supports this out of the box yet. Opera does offer a similar feature called "Fast Forward" that extends spacebar scrolling (in all browsers you can just press the spacebar to scroll down a page) such that it will navigate to the next page when you hit the bottom. Per Opera's KB:

当然，目前还没有浏览器支持此功能。 Opera确实提供了类似的功能“ Fast Forward ”，该功能扩展了空格键的滚动(在所有浏览器中，您只需按空格键即可向下滚动页面)，这样当您点击底部时它将导航至下一页。 每个Opera的KB：

Fast Forward tries to analyze a page and looks for links that will take you to the next page, for example after a search with Google with several pages of search results. It looks for certain patterns that indicate a "next" link, or uses "<link rel="next">" if it is defined in the page.

快进会尝试分析页面并查找将您带到下一页的链接，例如，在使用Google搜索了几页搜索结果之后。 它查找指示“下一个”链接的某些模式，或者在页面中定义的情况下使用“ <link rel =“ next”> ”。

Unfortunately Opera analyzes my page and gets it wrong, selecting, oddly enough, an image as the next page to go to. This would likely be solved if I added a <link rel="next"> to my page's head, although again, I'd have to do this dynamically.

不幸的是，Opera分析了我的页面并弄错了，很奇怪地选择了一张图像作为下一页。 如果我在页面的头部添加了<link rel =“ next”>，则很可能会解决此问题，尽管同样，我必须动态地执行此操作。

As an aside, notice this comment from Opera on their KB...

顺便说一句，请注意Opera对其KB的评论...

Please note that Fast Forward does not use any external services to determine the next page. It only looks at the current page and tries to find things that indicate that there is a "next" page. It does not look it up from an external server or contact any site to get this info.

请注意，快进不使用任何外部服务来决定下一个页面。 它仅查看当前页面，并尝试查找表明存在“下一页”页面的内容。 它不会从外部服务器上查找它，也不会与任何站点联系以获取此信息。

This means they, too, realize that an external service is folly and the only way for this to work going forward is via microformats. I fervently agree.

这也意味着他们也意识到外部服务是愚蠢的，而实现这一目标的唯一方法就是通过微格式。 我非常同意。

翻译自: https://www.hanselman.com/blog/infinite-scroll-websites-via-autopagerize-hacky-but-the-beginning-of-something-cool