In una pagina dove è necessario mostrare un carosello di elementi o immagini, le opzioni possibili sono due: posizionare gli elementi nel primo spazio disponibile oppure inserirli in un container e predisporre una scroll-bar. Benchè il primo, in termini di layout e design, sia irrealizzabile, per il secondo troviamo un sistema, basato sullo scorrimento, alquanto primitivo e dozzinale.

Per arrivare a un esperienza più concreta, quasi da social-network, non dobbiamo affidarci a librerie, ma possiamo utilizzare la metodologia CSS Scroll Snap. Questa tecnica non fa altro che individuare, all'interno di un contenitore, un punto di ancoraggio e al tempo stesso identifica i figli, a cui assegna in ugual modo dei punti di ancoraggio. A questo punto, in maniera del tutto nativa, allo scorrimento, il browser tenterà di far combaciare il padre con uno dei figli, garantendo uno scorrimento molto più intuitivo e lineare.

.container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.child {
  scroll-snap-align: start;
}

Per il contenitore le variabili da fornire sono due: la prima è per il verso di scorrimento (x o y), la seconda per la forza di attrazione. Con mandatory la scrollbar si fermerà sempre su un elemento, fornendo invece proximity il riposizionamento potrebbe non attivarsi se l'utente non scorre in prossimità del punto di ancoraggio.

Sull'elemento figlio è altresì importante specificare dov'è il punto di ancoraggio, che può essere start, center o end.