Se você é um desenvolvedor front-end, pode ter se deparado com problemas de barra de rolagem horizontal, especialmente em dispositivos móveis. Como existem muitas causas para os problemas da barra de rolagem, não há uma solução direta. Alguns problemas podem ser corrigidos rapidamente e alguns precisam de um pouco de habilidade de depuração.
O que é um problema de estouro?
Antes de discutir questões de transbordamento, devemos verificar o que é. Um problema de estouro ocorre quando uma barra de rolagem horizontal aparece acidentalmente em uma página da web, permitindo que o usuário role horizontalmente. Pode ser causado por diferentes fatores.
Isso pode ocorrer devido a um conteúdo inesperadamente largo ou um elemento de largura fixa que é mais largo do que a janela de visualização. Exploraremos todas as causas neste artigo.
Como detectar o estouro
Uma parte importante da solução desse problema é perceber isso em primeiro lugar. Se soubermos quando e onde isso acontece, podemos acessar essa parte de uma página da web. Existem diferentes maneiras de detectar o estouro, desde a rolagem manual para a esquerda ou direita ou usando JavaScript.
Vamos explorar as maneiras de detectar estouro.
Rolando para a esquerda ou direita
A primeira maneira de descobrir um problema de estouro é rolar a página horizontalmente. Se você conseguir rolar, este é um aviso de que algo está errado com a página.
Usando JavaScript para encontrar elementos mais largos que o corpo
Podemos adicionar um snippet ao console do navegador para mostrar quaisquer elementos mais largos que o corpo. Isso é útil para páginas com muitos elementos.
var docWidth=document.documentElement.offsetWidth; [].forEach.call ( document.querySelectorAll ('*'), função (el) { if (el.offsetWidth> docWidth) { console.log (el); } }
);
Esboço CSS para o resgate
Aplicar o contorno do CSS a todos os elementos da página nos dá uma dica sobre os elementos que vão além do corpo da página.
* { contorno: sólido 1px vermelho;
}
Melhor ainda, Addy Osmani tem um script que adiciona um contorno a cada elemento da página com uma cor aleatória.
[].forEach.call ($$ (""), função (a) {a.style.outline="1px solid #"+ (~~ (Math.random () (1<<24))).toString(16)})
Etiqueta de estouro no Firefox
O Firefox tem um recurso útil que informa quais elementos estão causando estouro. Esperançosamente, outros navegadores adicionarão isso!
Excluindo elementos da página
Outra maneira comum é abrir as DevTools do navegador e começar a excluir os elementos um por um. Assim que o problema desaparecer, a seção que você acabou de excluir é provavelmente a causa. Achei esse método útil nos casos em que você identificou o problema, mas não sabe por que está acontecendo.
Depois de descobrir onde o estouro está acontecendo, será mais fácil fazer um caso de teste reduzido para depuração adicional.
Problemas comuns de estouro
Elementos de largura fixa
Uma das causas mais comuns de estouro são os elementos de largura fixa. De modo geral, não fixe a largura de nenhum elemento que deve funcionar em vários tamanhos de janela de visualização.
.element { /* Não faça isso */ largura: 400px;
}
Usando Flexbox sem embrulhar
Tão útil quanto o Flexbox é, não permitir que os itens quebrem em uma nova linha quando não há espaço disponível é arriscado.
.parent { display: flex;
}
Aqui, os itens flexíveis podem causar estouro horizontal, caso o espaço não seja suficiente para colocá-los todos em uma linha:
Certifique-se de usar flex-wrap: wrap quando o flex parent deve funcionar em diferentes tamanhos de viewport.
.parent { display: flex; /* Fazem isto */ flex-wrap: wrap;
}
Grade CSS
Quando você usa uma grade CSS, é importante projetar de forma responsiva. Pegue a seguinte grade:
.wrapper { display: grade; colunas de modelo de grade: 1fr 300px 1fr; grid-gap: 1rem;
}
O exemplo acima funcionará bem, a menos que a janela de visualização seja mais estreita do que 300 pixels. Se for, ocorrerá um estouro.
Para evitar esse problema, use a grade apenas quando houver espaço suficiente disponível. Podemos usar uma consulta de mídia CSS como:
.wrapper { display: grade; colunas de modelo de grade: 1fr; grid-gap: 1rem;
} @media (largura mínima: 400px) { .embrulho { colunas de modelo de grade: 1fr 300px 1fr; }
}
Palavras longas
Outro motivo comum para estouro é uma palavra longa que não cabe na janela de visualização. Isso acontece mais em dispositivos móveis por causa da largura da janela de visualização.
Para corrigir isso, precisamos usar a propriedade overflow-wrap .
.article-content p { overflow-wrap: quebra de palavra;
}
Escrevi um artigo detalhado sobre lidar com conteúdo curto e longo com CSS.
Essa correção é particularmente útil com conteúdo gerado pelo usuário. Um exemplo perfeito disso é um tópico de comentários. Um usuário pode colar um URL longo em seu comentário e isso deve ser tratado com a propriedade overflow-wrap .
Tamanho mínimo do conteúdo no CSS Flexbox
Outra causa interessante de estouro é o tamanho mínimo do conteúdo no Flexbox. O que isso significa?
De acordo com a especificação :
“Por padrão, os itens flexíveis não encolherão abaixo de seu tamanho mínimo de conteúdo (o comprimento da palavra mais longa ou elemento de tamanho fixo). Para alterar isso, defina a propriedade
min-widthoumin-height. ”
Isso significa que um item flexível com uma palavra longa não encolherá abaixo de seu tamanho mínimo de conteúdo.
Para corrigir isso, podemos usar um valor overflow diferente de visible , ou podemos definir min-width: 0 no item flexível.
.card__name { largura mínima: 0; overflow-wrap: quebra de palavra;
}
Tamanho mínimo do conteúdo na grade CSS
Assim como o Flexbox, temos o mesmo conceito de tamanho mínimo de conteúdo com CSS Grid. No entanto, a solução é um pouco diferente. CSS-Tricks se refere a ele como “ grid blowout ”.
Vamos explorar o problema. Suponha que temos um wrapper com uma seção lateral e uma seção principal dispostas com grade CSS.
.wrapper { display: grade; colunas de modelo de grade: 248 px minmax (0, 1fr); intervalo de grade: 40px;
}
Além disso, temos uma seção de rolagem na seção principal, para a qual usei o flexbox.
.section { display: flex; lacuna: 1rem; overflow-x: automático;
}
Observe que não adicionei flex-wrap , porque quero que os itens flexíveis estejam na mesma linha. No entanto, isso não funcionou e está causando um estouro horizontal.
Para corrigir isso, precisamos usar minmax () em vez de 1fr . Dessa forma, o tamanho mínimo do conteúdo do elemento principal não será auto .
.wrapper { display: grade; colunas de modelo de grade: 248 px minmax (0, 1fr); intervalo de grade: 40px;
}
Margens negativas
Um elemento posicionado fora da tela pode causar estouro. Normalmente, isso ocorre porque o elemento tem uma margem negativa.
No exemplo a seguir, temos um elemento com uma margem negativa e o idioma do documento é o inglês (ou seja, da esquerda para a direita).
.element { posição: absoluta; direita:-100px;
}
Curiosamente, quando o elemento é posicionado no lado oposto, não há estouro. Por que isso?
Enfrentei esse problema recentemente e escrevi sobre isso . Acontece que esse comportamento é intencional. De acordo com a especificação CSS :
“Os UAs devem cortar a área de estouro de rolagem dos contêineres de rolagem nos lados de início do bloco e início em linha da caixa (comportando-se como se não tivessem estouro de rolagem nesse lado).”
Para um documento em inglês, o lado inline-start é o lado esquerdo , portanto, qualquer elemento posicionado fora da tela à esquerda será cortado e, portanto, não haverá estouro.
Se posicionar um elemento fora da tela é realmente necessário, certifique-se de aplicar overflow: hidden ao pai para evitar qualquer estouro.
Imagens sem max-width
Se você não cuidar de imagens grandes com antecedência, verá o estouro. Certifique-se de definir max-width: 100% em todas as imagens.
img { largura máxima: 100%;
}
Unidades da janela de visualização
Usar 100vw tem uma desvantagem, que pode causar estouro quando a barra de rolagem estiver visível. No macOS, 100vw funciona e não causa rolagem horizontal.
No Windows, as barras de rolagem estão sempre visíveis por padrão, então ocorrerá transbordamento.
A razão para isso é que com o valor 100vw , não há conhecimento da largura da barra de rolagem vertical do navegador . Como resultado, a largura será igual a 100vw mais a largura da barra de rolagem. Infelizmente, não há correção de CSS para isso.
No entanto, podemos usar JavaScript para medir a largura da janela de visualização, excluindo a barra de rolagem.
function handleFullWidthSizing () { const scrollbarWidth=window.innerWidth-document.body.clientWidth document.querySelector ('myElement'). style.width= calc (100vw-$ {scrollbarWidth} px)
}
Anúncios injetados
Anúncios injetados no carregamento da página podem causar estouro se forem mais largos do que seus pais. Adicione overflow-x: hidden ao elemento pai para evitar isso.
Verifique novamente cada anúncio no site para garantir que não esteja causando estouro.
Aplicar overflow-x: hidden a body é uma boa ideia?
Optar por overflow-x: hidden é como colocar um curativo sem resolver o problema. Se houver estouro, é melhor resolver o problema raiz.
Além disso, aplicar overflow-x: hidden ao elemento body não é uma boa ideia porque position: sticky não funcionará se um pai tem overflow-x: hidden .
Como evitar overflow em CSS
Abaixo estão itens a serem verificados para reduzir problemas de estouro em CSS. Espero que seja útil!
Teste com conteúdo real
Nada supera o teste com conteúdo real em um site. Ao fazer isso, você garante que o layout pode lidar com diferentes variedades de conteúdo.
Conta para conteúdo gerado pelo usuário
Para um componente como um tópico de comentários, considere os casos em que o usuário colará um URL longo ou digitará uma palavra longa, conforme explicado acima.
Use CSS Grid e Flexbox com cuidado
Tão úteis quanto a grade CSS e o flexbox são, eles podem facilmente causar estouro se usados incorretamente. Como discutimos, não usar flex-wrap: wrap pode causar estouro, assim como pode grid-template-columns: 1fr 350px quando a tela é mais estreita do que 350 pixels.
Leitura adicional no SmashingMag:
- Coisas que você pode fazer com CSS hoje
- Componentes de front-end acessíveis
- Ferramentas de auditoria CSS
- Geradores CSS
- ... e mais em nosso Guia de layout CSS .
