TL; DR. Although the endless scrolling is suitable for some cases, but it can create problems.

Infinite scrolling can be misleading, out of control, and stressful to users.
')
In this article we will explain why you need to stop creating sites with endless scrolling. But first, consider a brief history of the issue.

Brief history of scrolling

To understand what scrolling is, look at the origin of the word .

scroll ( n.): c. 1400, “roll of parchment or paper”

Scrolls were originally used when the document became too long (for example, religious content). With so much content it became difficult to manage, difficult to read and rewrite.

When computers entered our lives, we still needed a way to navigate through large pieces of content.

The evolution of scrolls in computers

1. Rows (and columns)

After the advent of the web, designers invented / explored many ways to paginate / scroll content. Before the Internet, we scrolled lines on the screen.

Horizontal scrolling made the scrolling tool not only for reading the content, but also for navigating the screen.

2. Windows (not an operating system)

Having scrolling pushed people to create a window interface. With the help of windows you can simultaneously view several pieces of content.


In the Program Manager Windows 3.1 several "scrolls"

3. Web pages

Scrolling solves the most fundamental problem when browsing the web. However, it can cause many problems for users and can prevent them. Let's take a closer look.

Options for navigating web pages

I will try to determine how developers and designers created an interface for navigating web pages.

Let's start with some server systems pagination.

Layout of pages based on the offset

The most famous pagination system. In this technique, you first need to find how many elements need to be paginated:

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

. , 10 :

-- First page items
SELECT * FROM posts LIMIT 10

3, 30 , (OFFSET):

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

:

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

:

• :
• :
• :
• :

, ( Twitter). , : (cursor).

. :

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

:

• : ,
• : , -
• :
• : ,

.

:
:

. . , .


WordPress

:
:

-, . , , .




Google :

:
: , ,

, .


« »

« » (Load More), .

:
: , ,

— .

, 2005 Microsoft.

Metafizzy open source , .

!

, . , .

 — -, . : , , . , .

, . ( ).

(, Twitter) , .  — , . .


Twitter

,

. , . . , .

-, , , — , . . . .

, , UI, .

- . , , ( ). UI . - .

. .

« », . . ( , , ).

, , ..

. . , .

, . , .

, « », . , K, .

, . , , , .

, , , . , . !