Cursor de mão, bloquear seleção de texto, e um carrossel só de CSS (scroll-snap).
O que é
Pequenos utilitários de interação — incluindo um padrão de carrossel puramente CSS via scroll-snap, sem JS nenhum.
Como funciona
A maioria é uma propriedade CSS isolada por classe (cursor, user-select, pointer-events, visibility). O carrossel-sem-JS combina overflow-x com scroll-snap-type: x no contêiner (ovx snap-x) e scroll-snap-align em cada filho (snap-c) — o navegador cuida de "encaixar" no item mais próximo ao soltar o scroll, sem nenhum listener de JS.
Exemplos
Carrossel só com CSS — arraste de lado Ao vivo
card 1
card 2
card 3
card 4
card 5
card 6
Arraste de lado (ou use shift+roda): ao soltar, ele encaixa no card mais próximo. Nenhum JavaScript envolvido.
<div class="ovx snap-x scroll-sm flx gap-3">
<div class="snap-c">card 1</div>
<div class="snap-c">card 2</div>
<div class="snap-c">card 3</div>
</div>
<!-- .ovx rola na horizontal · .snap-x liga o encaixe no contêiner
· .snap-c marca cada ponto de parada nos filhos -->
Cursor e seleção de texto Ao vivo
este trecho tem cursor de mão — passe o mouse
tente selecionar este texto com o mouse: não dá
este aqui seleciona normalmente, pra comparar
<span class="poi">cursor de mão (pointer)</span>
<p class="sel-no">não deixa selecionar o texto</p>
<!-- .sel-no é útil em rótulo de botão e em UI que se clica muito,
pra um duplo clique não sair pintando o texto de azul -->
Ignorar clique e esconder ocupando espaço Ao vivo
antes[invisível, mas ocupa o espaço]depois
Repare no vão entre "antes" e "depois": o elemento está ali, só não é visto.
<!-- ignora clique: o mouse "atravessa" o elemento -->
<div class="pe-no">selo decorativo por cima do card</div>
<!-- invisível, mas continua ocupando o lugar (visibility:hidden) -->
<span class="hid">reservando espaço</span>
<!-- diferente de display:none, que tira do fluxo e faz o layout pular -->
Lista longa (.cv-au) Ao vivo
O .cv-au avisa o navegador que aquele bloco pode ser deixado pra depois se estiver fora da tela (content-visibility). Em lista longa, isso encurta bastante o tempo até a página aparecer — e não muda nada visualmente.
<div class="cv-au">
…item de uma lista com centenas de blocos…
</div>
<!-- aplique no ITEM repetido, não no contêiner inteiro -->
Atributos
Nenhum.
Variantes
poi
cursor de mão (pointer)
sel-no
não deixa selecionar o texto
pe-no
ignora clique (pointer-events: none)
hid
invisível mas ocupa espaço (visibility:hidden)
cv-au
contain visual pra lista longa
ovx snap-x + snap-c (nos filhos)
carrossel só com CSS (scroll-snap)
Eventos
Nenhum.
API (JavaScript)
Nenhum.
Requisitos
Nenhuma.
Limitações — o que ele não faz
O carrossel de scroll-snap não tem setas nem bolinhas: é rolagem nativa. Se você precisa de controles, o componente é o Slider ou o Text Carousel.
O .pe-no desliga o clique de verdade — inclusive pra teclado e leitor de tela. Não use pra "desabilitar" botão de formulário; pra isso existe o atributo disabled.
