Como ele é
Lembra a ilha de notificações dos celulares recentes, dedicada à leitura. Uma pílula na cor primária do tema, levemente translúcida e com desfoque atrás, fica presa no topo e centralizada enquanto a página rola. À esquerda, um pequeno anel se preenche conforme a rolagem; no centro, um título curto; à direita, a porcentagem, com dígitos que rolam ao mudar. O anel troca de cor entre o modo claro e o escuro para manter o contraste. Ao carregar, ela se abre do centro com um leve quique. Um clique a expande num painel um pouco mais largo, com até 240 pixels de conteúdo rolável, como uma lista de seções.
Você pode estar procurando isto se pediu algo assim
- aquela ilha do iPhone, mas mostrando quanto falta para terminar de ler
- barra de progresso de leitura flutuando no topo do artigo
- indicador de porcentagem lida que fica fixo enquanto rolo a página
- menu flutuante que abre com o índice do artigo
- pílula no topo da página com o progresso do scroll
- mostrar ao leitor quanto da proposta ele já leu
Também chamado de
- scroll island
- reading progress
- barra de progresso de leitura
- scroll progress indicator
- ilha dinâmica
- dynamic island
- indicador de rolagem
Quando usar
- Artigos longos de blog, guias e estudos de caso
- Propostas comerciais e relatórios publicados como página
- Documentação com índice de seções que a pessoa quer acessar rápido
- Landing pages longas em que vale mostrar o quanto falta
Quando evitar
- Páginas curtas, em que o indicador quase não sai do zero
- Layouts que já têm uma barra fixa no topo, onde a pílula disputa espaço
Como pedir para a sua IA
Adicione uma ilha flutuante de progresso de leitura no topo dos meus artigos: pílula fixa com anel e porcentagem lida, que se expande ao clicar com o índice das seções, abre pelo teclado, usa as cores do tema e tem versão sem animação para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Scroll Island
O Scroll Island funciona no Nuxt com SSR?
Funciona, com um cuidado. O Scroll Island lê a rolagem e o tema de cores no navegador ao montar, por isso o prompt do THM Componentes orienta a IA a carregar sob demanda e a envolver o componente em ClientOnly, com um fallback estático no servidor. Ele também precisa de uma dependência de números animados, instalada pelo mesmo prompt.
Dá para abrir o Scroll Island pelo teclado?
Não por padrão. O Scroll Island abre e fecha com um clique na própria pílula, que não é um botão, então não recebe foco pelo Tab nem responde ao Enter. Os links dentro da área expandida são focáveis. Vale pedir à IA para trocar o gatilho por um botão com aria-expanded e anunciar o progresso de forma discreta.
O Scroll Island funciona no celular?
Sim. O progresso do Scroll Island acompanha a rolagem pelo dedo ou pela roda do mouse, e o toque na pílula abre e fecha a área extra como um clique. A pílula tem 260 pixels de largura fechada e 320 aberta, o que cabe na maioria dos celulares; em telas muito estreitas, vale reduzir esses valores.
