{"id":4025,"date":"2024-09-02T13:50:59","date_gmt":"2024-09-02T13:50:59","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=4025"},"modified":"2026-01-20T14:48:28","modified_gmt":"2026-01-20T14:48:28","slug":"o-que-e-rolagem-infinita-em-sites","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-rolagem-infinita-em-sites\/","title":{"rendered":"O que \u00e9 rolagem infinita em sites?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice<\/h2><nav><ul><li><a href=\"#pagination-vs-infinite-scroll-which-is-better-for-your-content\">Pagina\u00e7\u00e3o vs. rolagem infinita: qual \u00e9 a melhor para o seu conte\u00fado?<\/a><ul><li><a href=\"#what-are-the-benefits-and-limitations-of-infinite-scrolling\">Quais s\u00e3o os benef\u00edcios e as limita\u00e7\u00f5es da rolagem infinita?<\/a><\/li><li><a href=\"#is-infinite-scrolling-right-for-your-design\">A rolagem infinita \u00e9 adequada para o seu design?<\/a><ul><li><a href=\"#what-types-of-websites-or-applications-are-best-suited-for-infinite-scrolling\">Quais tipos de sites ou aplicativos s\u00e3o mais adequados para a rolagem infinita?<\/a><\/li><li><a href=\"#are-there-any-accessibility-concerns-related-to-infinite-scrolling\">Existem preocupa\u00e7\u00f5es de acessibilidade relacionadas \u00e0 rolagem infinita?<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#conclusion\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"pagination-vs-infinite-scroll-which-is-better-for-your-content\" style=\"font-size:32px\"><strong>Pagina\u00e7\u00e3o vs. rolagem infinita: qual \u00e9 a melhor para o seu conte\u00fado?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Escolher o que melhor se adapta a voc\u00ea \u00e9 uma quest\u00e3o de contexto, prop\u00f3sito e conte\u00fado que voc\u00ea deseja entregar. <\/p>\n\n\n\n<p style=\"font-size:18px\">Considere isto:<\/p>\n\n\n\n<p style=\"font-size:18px\">A rolagem infinita geralmente \u00e9 apropriada para:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Apoiar a explora\u00e7\u00e3o e descoberta de conte\u00fado:<\/strong> Aplic\u00e1vel a m\u00eddias sociais, feeds de not\u00edcias, listas de produtos de e-commerce ou galerias de imagens onde os usu\u00e1rios podem se envolver em explora\u00e7\u00e3o profunda sem um prop\u00f3sito espec\u00edfico.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Design mobile-first: <\/strong>Ele enfatiza a facilidade de uso e navega\u00e7\u00e3o em dispositivos m\u00f3veis.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p style=\"font-size:18px\">E a pagina\u00e7\u00e3o \u00e9 preferida quando:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Os usu\u00e1rios est\u00e3o procurando por uma determinada informa\u00e7\u00e3o:<\/strong> Por exemplo, cat\u00e1logos de produtos ou resultados de pesquisa onde o usu\u00e1rio pode querer pular para uma p\u00e1gina ou produto espec\u00edfico.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" id=\"what-are-the-benefits-and-limitations-of-infinite-scrolling\" style=\"color:#422b82;font-size:22px\"><strong>Quais s\u00e3o os benef\u00edcios e as limita\u00e7\u00f5es da rolagem infinita?<\/strong><\/h3>\n\n\n\n<p style=\"font-size:18px\">Os benef\u00edcios e limita\u00e7\u00f5es da rolagem infinita geralmente abrangem o seguinte:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Aumentar a reten\u00e7\u00e3o de usu\u00e1rios x Considera\u00e7\u00f5es de acessibilidade: <\/strong>A abund\u00e2ncia de informa\u00e7\u00f5es mant\u00e9m os usu\u00e1rios interessados no site, mas pode ser bastante frustrante para usu\u00e1rios de teclado e outros que dependem de leitores de tela.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Experi\u00eancia m\u00f3vel aprimorada x Poss\u00edveis problemas de desempenho:<\/strong> O aplicativo \u00e9 intuitivo e simples em dispositivos t\u00e1teis, mas ter muitos dados torna o site lento.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Navega\u00e7\u00e3o perfeita x Encontrar conte\u00fado espec\u00edfico:<\/strong> \u00c9 uma intera\u00e7\u00e3o f\u00e1cil simplesmente rolar direto para baixo; ainda assim, os usu\u00e1rios podem ter dificuldade em encontrar algo que j\u00e1 viram antes.<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nSempre inclua uma dica visual ao buscar mais dados, como uma anima\u00e7\u00e3o de carregamento, para remover as chances de ambiguidade para os usu\u00e1rios. Isso elimina qualquer confus\u00e3o e aborrecimento.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" id=\"is-infinite-scrolling-right-for-your-design\" style=\"color:#422b82;font-size:22px\"><strong>A rolagem infinita \u00e9 adequada para o seu design?<\/strong><\/h3>\n\n\n\n<p style=\"font-size:18px\">As seguintes perguntas podem ajudar voc\u00ea a identificar se a rolagem infinita \u00e9 adequada para o design do seu site:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Qual \u00e9 a ess\u00eancia geral do seu site?<\/strong> A inten\u00e7\u00e3o \u00e9 permitir que os usu\u00e1rios explorem ou transmitir uma determinada informa\u00e7\u00e3o?<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Os usu\u00e1rios usam principalmente seus telefones? <\/strong>Ent\u00e3o, provavelmente, a rolagem infinita funcionaria para eles.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>E quanto \u00e0 otimiza\u00e7\u00e3o de desempenho?<\/strong> Com a rolagem infinita, a otimiza\u00e7\u00e3o cuidadosa deve ser realizada para evitar inclina\u00e7\u00f5es lentas da p\u00e1gina.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Voc\u00ea considerou a acessibilidade?<\/strong> Recomenda-se espa\u00e7amento para garantir que a rolagem infinita seja vi\u00e1vel para usu\u00e1rios com outras defici\u00eancias.<\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:18px\">\u00c9 ideal testar a rolagem infinita e a pagina\u00e7\u00e3o em seu site e medir o desempenho da que melhor funciona para seu p\u00fablico.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nSe voc\u00ea estiver usando rolagem infinita, oferecer um bot\u00e3o \"Voltar ao topo\" \u00e9 uma boa pr\u00e1tica, pois a rolagem cont\u00ednua pode ser inconveniente para os usu\u00e1rios, o que pode contribuir para o abandono da pesquisa.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading has-text-color has-medium-font-size\" id=\"what-types-of-websites-or-applications-are-best-suited-for-infinite-scrolling\" style=\"color:#422b82\"><strong>Quais tipos de sites ou aplicativos s\u00e3o mais adequados para a rolagem infinita?<\/strong><\/h4>\n\n\n\n<p style=\"font-size:18px\">A rolagem infinita \u00e9 usada em sites ou aplicativos como os listados abaixo:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Redes sociais:<\/strong> Twitter, Instagram, Facebook e sites de m\u00eddia social.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Sites de not\u00edcias:<\/strong> Esses sites exigem atualiza\u00e7\u00f5es frequentes, especialmente neste caso.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Galerias de imagens e listas de produtos de e-commerce:<\/strong> Devem estar na ordem perfeita dentro de um contexto apropriado.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Aplicativos m\u00f3veis:<\/strong> A inclus\u00e3o da rolagem infinita na interface m\u00f3vel \u00e9 um processo relativamente simples.<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nA rolagem infinita de p\u00e1gina pode ser usada para os tipos de conte\u00fado de sites que s\u00e3o cont\u00ednuos e n\u00e3o exigem que os usu\u00e1rios rolem para partes espec\u00edficas regularmente.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading has-text-color has-medium-font-size\" id=\"are-there-any-accessibility-concerns-related-to-infinite-scrolling\" style=\"color:#422b82\"><strong>Existem preocupa\u00e7\u00f5es de acessibilidade relacionadas \u00e0 rolagem infinita?<\/strong><\/h4>\n\n\n\n<p style=\"font-size:18px\">Sim. \u00c9 importante reconhecer que a rolagem infinita em sites tem seus m\u00e9ritos, mas seu uso requer uma abordagem cautelosa. Esses aspectos, al\u00e9m de como a rolagem infinita \u00e9 integrada, desempenham um papel importante no fornecimento de uma experi\u00eancia de usu\u00e1rio consistente.&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">Fornecer pontos de refer\u00eancia de navega\u00e7\u00e3o claros, meios alternativos de acesso ao conte\u00fado e gerenciamento de foco adequado s\u00e3o alguns dos recursos importantes para tornar a rolagem infinita utiliz\u00e1vel para todos os usu\u00e1rios.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nUm mergulho profundo: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u2022 Ofere\u00e7a alternativas otimizadas para rolagem infinita, por exemplo, a inclus\u00e3o de pontos de refer\u00eancia ARIA.<br><br> \n\u2022 Estruturar o conte\u00fado de forma que possua recursos de pontos de refer\u00eancia e t\u00edtulos claros para quem usa leitores de tela para navega\u00e7\u00e3o, mesmo com a op\u00e7\u00e3o de rolagem infinita.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"font-size:32px\"><strong>Conclus\u00e3o<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">A rolagem infinita \u00e9 um recurso interativo que permite a visualiza\u00e7\u00e3o cont\u00ednua de conte\u00fado \u00e0 medida que os usu\u00e1rios rolam para baixo, aumentando potencialmente o engajamento do usu\u00e1rio. No entanto, este n\u00e3o \u00e9 o caso com todas as abordagens. Examinar as vantagens, desvantagens e a adequa\u00e7\u00e3o de um recurso para um p\u00fablico espec\u00edfico permite escolhas informadas sobre a funcionalidade e a experi\u00eancia do usu\u00e1rio do site.<\/p>","protected":false},"excerpt":{"rendered":"<p>Pagination vs. infinite scroll: which is better for your content? Choosing what suits you is a matter of context, purpose, and content that you want to deliver. Consider this: Infinite scroll is usually appropriate for: And, pagination is preferred when: What are the benefits and limitations of infinite scrolling? The benefits and limitations of infinite [&hellip;]<\/p>","protected":false},"author":39,"featured_media":4043,"template":"","answers_category":[28],"class_list":["post-4025","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-design"],"acf":{"image":7816,"card_image":4043,"content":[{"acf_fc_layout":"header_section","title":"What is Infinite Scrolling?","descriptions":"Infinite scrolling, also referred to as endless scrolling, is a web design technique in which the site loads additional content as the user scrolls down viewing an infinitely long web page. Removing the need for \u201cnext page\u201d button clicks could result in a more comfortable navigation experience.\r\n\r\nYou can imagine a social networking site (e.g. Instagram) or an image gallery website with endless scrolling.","tip_label":"Pro Tip","tip":"If you want to use the infinite scrolling functionality, don\u2019t forget to implement \u201clazy loading\u201d. This is done to increase the speed of the application meaning that some content will load dynamically upon becoming visible.","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Endless scrolling = more engagement; however, not ideal if you want to search for a particular piece of information","body":""},{"label":"Optimizing performance and accessibility is crucial when implementing infinite scroll","body":""},{"label":"Check out different versions of scrolling and pagination to see what is best for your users","body":""}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/4025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media\/4043"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=4025"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=4025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}