post

Scroll horizontal (snap) com CSS para mobile

Publicado em: 25/02/2022 / Atualizado em: 25/02/2022

Categorias: BlogCSSHTML

Com este código, é possível criar o efeito de slide, em qualquer bloco HTML apenas com CSS.

Este código funciona bem para dispositivos mobile, que possibilita ao usuário, “rolar” a div para a horizontal com o dedo.

Porem, para desktop, fica um pouco limitado o uso de “rolar para a horizontal”, mas ainda sim o slide funciona.

<div class="slider">
  <div class="item">Primeiro</div>
  <div class="item">Segundo</div>
  <div class="item">Terceiro</div>
</div>
.slider {
  overflow: auto;
  display: flex;
  scroll-snap-type: x mandatory;
}
.item {
  min-width: 100%;
  scroll-snap-align: start;
}

Veja o código funcionando online: https://Scroll-horizontal-snap-com-CSS-para-mobile.brunoalbim.repl.co

Publicações recomendadas:


Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News


Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/1486

ID de Referência: 1486

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários