TL; DR. Meskipun pengguliran tanpa akhir cocok untuk beberapa kasus, ini dapat menyebabkan masalah.

Pengguliran tak terbatas dapat membingungkan, tak terkendali, dan menyebabkan stres bagi pengguna.

Pada artikel ini, kami akan menjelaskan mengapa Anda harus berhenti membuat situs dengan pengguliran tanpa akhir. Tapi pertama-tama, pertimbangkan sejarah singkat masalah ini.

Sejarah singkat pengguliran

Untuk memahami apa itu pengguliran, mari kita lihat asal kata .

gulir (gulir) (n.): c. 1400, “gulungan perkamen atau kertas”

Gulungan awalnya digunakan ketika dokumen menjadi terlalu panjang (misalnya, konten keagamaan). Dengan begitu banyak konten, menjadi sulit untuk dikelola, sulit untuk dibaca dan ditulis ulang.

Ketika komputer memasuki kehidupan kita, kita masih membutuhkan cara untuk menavigasi konten yang besar.

Evolusi gulungan di komputer

1. Baris (dan kolom)

Setelah munculnya web, desainer menemukan / mempelajari banyak cara untuk membuat paginasi / menggulir konten. Sebelum Internet, kami menggulirkan garis-garis pada layar.

Pengguliran horizontal membuat pengguliran alat tidak hanya untuk membaca konten, tetapi juga untuk menavigasi layar.

2. Windows (bukan sistem operasi)

Kehadiran scrolling mendorong orang untuk membuat antarmuka jendela. Dengan menggunakan windows, Anda dapat melihat banyak konten sekaligus.


Ada beberapa "gulungan" di Manajer Program Windows 3.1

3. halaman web

Scrolling memecahkan masalah paling mendasar saat menjelajah web. Namun, hal itu dapat menyebabkan banyak masalah bagi pengguna dan dapat mengganggu mereka. Mari kita lihat lebih dekat.

Opsi navigasi halaman web

Saya akan mencoba menentukan bagaimana pengembang dan perancang menciptakan antarmuka untuk menavigasi halaman web.

Mari kita mulai dengan beberapa sistem server pagination.

Pagination berbasis offset

Sistem pagination paling terkenal. Dalam teknik ini, pertama-tama Anda perlu menemukan berapa banyak elemen yang ingin Anda paginasi:

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

, . , , , .

, , , . , . !