原文链接：https://logrocket.com/blog/infinite-scroll/

正文

在这篇文章中，我们将会解释为什么你在构建网站时需要停止使用无限滚动的方式。
虽然无限滚动确实在某些情况下提供了解决方案，但它对用户来说可能不太理想。
无限滚动会让人感到迷惑、无法控制，还会给用户造成压力。

在这篇文章中，我们将会解释为什么你在构建网站时需要停止使用无限滚动的方式。在开始前，让我们先来看一下页面滚动的发展简史。

滚动条的发展简史

为了更好地了解滚动的真正含义，让我们看看术语滚动的来源。

scroll (n.): c. 1400, “roll of parchment or paper” 羊皮卷或纸卷

滚动最初是用于信息变得冗长的情况（如宗教内容）。太多的内容变得难以管理、读写。
当计算机进入我们的生活时，我们仍然需要一种方法来浏览大量内容。

滚动轴在计算机中的演变

1.线条（和列）

在互联网的早期阶段，用户体验设计师们发明/探索了许多分页/滚动内容的方法。在网络流行之前，我们在屏幕上滚动线条。
水平滚动轴使得滚动成为一种既用于阅读内容，又用于在计算机屏幕上导航的工具。

2.窗口 (不是操作系统)

使用滚动导航屏幕鼓励人们创建窗口。 使用这些窗口，您可以一次查看多个内容。

image

Windows 3.1“程序管理器”有多个滚动轴

3.网页

滚动解决了浏览网页时遇到的一个非常基本的问题。但是，滚动可能会给用户带来许多问题，并可能对用户体验产生负面影响。让我们仔细看看。

为浏览网页而发明的经验

我将尝试定义开发人员和设计人员如何创建经验以在其网页中引导用户。
让我们从学习一些后端分页系统开始：

基于偏移的分页

这是最着名的分页系统。 在这种技术中，首先，我们必须找到我们要分页的条目数：

-- All posts count
SELECT COUNT(*) AS total FROM posts

计算完所有条目后，我们就要计算页数了。假设我们每页显示10条数据：

-- First page items
SELECT * FROM posts LIMIT 10

如果我们想要跳转到第三页，我们需要使用OFFSET跳过前30条数据：

-- Third page items
SELECT * FROM posts LIMIT 10 OFFSET 30

然后我们会把分页信息发送给客户端，就像下面这样：

{
  "pagination": {
    "items_count": 100,
    "current": 3,
    "total_pages": 10
  },
  "items": [...]
}

基于偏移进行分页的优缺点：

• :thumbsup: 优点：很容易跳转到任何页数
• :thumbsup: 优点：客户体验更自由
• :thumbsdown: 缺点：性能问题
• :thumbsdown: 缺点：如果数据发生了变化，某些数据可能会重复显示；

基于指针的分页

大量的数据使得计算表中总数很难，因为它不断增长（想想Twitter）。因此，开发人员提出了更新的技术来对数据进行分页：指针。
每行必须有一个唯一的指针。你不必统计整个表，这使得无法知道实际的页数：

-- Get extra 1 item to get its cursor.
SELECT * FROM posts ORDER BY id DESC LIMIT 11

假设每个帖子都有一个唯一的指针字段（或本例中的ID）来帮助分页。客户端将获得以下分页信息：

{
  "pagination": {
    "next": 1234 // extra item's ID (cursor), null if end of data.
  },
  "items": [...]
}

并且你可以使用指针查询下一页的数据

-- Offsetting records using 1234 cursor
SELECT * FROM posts WHERE id >= 1234 ORDER BY id LIMIT 11

基于指针分页的优缺点

• :thumbsup: 优点：性能更好，不用计算表的数量
• :thumbsup: 优点：如果有人在表的中间位置插入一行，也不会重复显示数据项
• :thumbsdown: 缺点：无法跳转到任何页面
• :thumbsdown: 缺点：客户端在这种方式下不自由，无法计算总页数和当前页数

我们来看看一些导航技术

下一页和上一页

体验：基于点击
技术：基于偏移或基于指针
这主要用于导航博客。这是无限滚动的最古老版本。使用这种方法，用户可能不会知道内容的结束位置。

image

编号分页

体验：基于点击
技术：基于偏移

这是最实用的（对我来说）导航类型。它使用基于偏移的分页，允许您跳转到所需的页面，或者只需单击一下就可以跳转到开始或末尾。

image

Google在搜索结果显示时使用此类导航：

image

加载更多

体验：基于单击
技术：基于指针 - 也可以是基于偏移的，但是会很尴尬

这是最新的分页技术之一，它也使用以前版本的无限滚动。

image

(一个加载更多对按钮)

在上面对例子中，用户通过点击"Load More"来查看更多内容。

无限滚动

体验：基于滚动
技术：基于指针 - 也可以是基于偏移的，但是会很尴尬

无限滚动是基于指针的分页技术的最新体验。

Hugh E. Williams声称他于2005年在微软发明了无限滚动。

Metafizzy还创建了一个工具来帮助开发人员构建无限卷轴。

[图片上传失败...(image-5dc887-1543323132394)]

(无限滚动使用户将页面滚动到无限远)

停止使用无限滚动

在本节之前，我们已经回顾了我们如何到达这种实现方式。现在让我们来谈谈为什么这样很糟糕。

寻找页脚

页脚是网页解剖的一个非常基本的元素，就像标题一样。网站会在页脚中保留一些详细信息和链接，例如电话号码，地址，帮助和支持链接。如果用户要查找这些详细信息，他们通常会向下滚动来查看页脚。

使用无限滚动，用户可能很难找到页脚。无限滚动使得无法找到页面的末尾。无法到达网站的底部会使用户感到压力（这不是很好）。

需要无限滚动来反馈信息的站点（如Twitter），通过在侧栏中放置所需的信息和链接来解决页脚的问题。使用侧边栏是对这个问题的一种解决方案，但不是一个特别好的方案。页脚应该保留在页面底部。

image

(推特将底部信息放在了侧边栏)

如果你没有时间轴或信息反馈，请勿使用无限滚动

社交媒体类应用依赖于时间。用户的意图是查看过去的内容。在这种情况下，无限滚动使信息加载更容易。这种情况下，无限滚动有利于提高性能，尤其是在移动设备中。

但是，如果你有电子商务、新闻、杂志或博客网站，并且用户的意图是浏览物品或文章，无限滚动就成为了他们的噩梦。在基于时间轴的列表中，人们大多不是寻找某个特定的日期或时间点。在基于条目的列表中，用户想要查找某条记录。无限滚动使您的用户几乎无法找到您的记录。

为用户提供更多控制权

当用户感觉自己无法控制UI时，一般就会不喜欢他们了。

滚动事件并不是故意做某事。人们浏览页面，如果他们想要进行某个动作，他们会主要通过点击或触摸来操作（称为触发器）。他们告知界面他们的决定。但是在用户没有做任何决定时就会触发滚动事件。

无限滚动使用户对页面的控制能力减弱，用户还可能会遇到跳跃故障。

使用一个“加载更多”按钮作为触发器，而不要使用无限滚动的形式。这样能够为用户提供更多控制能力。(我更喜欢旧式编号分页，但我们假设我们现在使用基于光标的分页)

允许用户去任何他们想去的地方

人们在页面之间浏览，将其中一些添加到书签，并分享页面给朋友们，等等。

然而，无限滚动无法通过这种设计保留用户需要的状态。用户无法共享其当前状态。这也意味着你无法使用分析工具跟踪用户的操作。

如果你的后端分页技术是基于指针的，那几乎不可能让你的用户去任何地方。如果你有一个电子商务网站，请让用户有能力控制去到他们想要的产品页面。

另外，如果你的列表信息中有“根据...排序”的功能，则必须向用户显示分页。在按字母顺序排列的列表中，您不能强迫用户向下滚动到以K开头的产品。他们会对这种体验感到气愤。

你应该允许用户看得到他们的所处的位置。用户滚动一段时间，因为它是无状态的设计，他们不知道“下一页”加载了多少次。当他们刷新页面时，他们会将页面重置直到回到原始状态。然后，用户必须再次向下滚动以找到它们之前浏览的位置。

结论

在某些情况下，无限滚动是不错的方案，但更多的情况下，它通常不是问题的解决者，而是问题制造者。用户体验设计人员不应该将无限滚动视为解决其分页问题的灵丹妙药。请停止使用无限滚动来构建网站。