TL; DR. Embora a rolagem sem fim seja apropriada para alguns casos, ela pode causar problemas.
A rolagem infinita pode ser desorientadora, incontrolável e causar estresse aos usuários.
Neste artigo, explicaremos por que você precisa parar de criar sites com rolagem sem fim. Mas primeiro, considere uma breve história do problema.
Uma breve história da rolagem
Para entender o que é rolagem, vejamos a origem da
palavra .
rolagem (rolagem) (n.): c. 1400, “rolo de pergaminho ou papel”Os pergaminhos foram originalmente usados quando o documento ficou muito longo (por exemplo, conteúdo religioso). Com tanto conteúdo, tornou-se difícil de gerenciar, difícil de ler e reescrever.
Quando os computadores entraram em nossas vidas, ainda precisávamos de uma maneira de navegar por grandes partes do conteúdo.
A evolução dos pergaminhos em computadores
1. Linhas (e colunas)
Após o advento da web, os designers inventaram / aprenderam várias maneiras de paginar / rolar o conteúdo. Antes da Internet, rolamos as linhas na tela.
A rolagem horizontal tornou a rolagem uma ferramenta não apenas para ler o conteúdo, mas também para navegar na tela.
2. Windows (não é um sistema operacional)
A presença de rolagem levou as pessoas a criar uma interface de janela. Usando o Windows, você pode visualizar várias partes do conteúdo ao mesmo tempo.
Existem vários "pergaminhos" no Gerenciador de programas do Windows 3.13. páginas da Web
A rolagem resolve o problema mais
fundamental ao navegar na web. No entanto, pode causar muitos problemas aos usuários e interferir com eles. Vamos dar uma olhada.
Opções de navegação na página da Web
Tentarei determinar como os desenvolvedores e designers criaram uma interface para navegar nas páginas da web.
Vamos começar com alguns sistemas de servidor de paginação.
Paginação baseada em deslocamento
O mais famoso sistema de paginação. Nesta técnica, você primeiro precisa encontrar quantos elementos deseja paginar:
-- 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, .
, . , , , .
, , , . , . !