Comment ajouter un scroll horizontal dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un scroll horizontal dans Webflow pour un carousel ou une galerie défilante.

Exemple

1. Créez le conteneur de scroll

Créez un Div scroll-container. Réglez : overflow-x: scroll (ou auto), display: flex, flex-wrap: nowrap. Ajoutez scrollbar-width: none pour cacher la scrollbar. À l'intérieur, ajoutez vos éléments enfants avec une largeur fixe ou min-width.

2. Activez le scroll snap

Sur le conteneur, ajoutez via embed CSS : scroll-snap-type: x mandatory. Sur chaque item enfant : scroll-snap-align: start. Cela crée un effet de "claquement" à chaque item au scroll.

3. Ajoutez des boutons de navigation (optionnel)

const container = document.querySelector('.scroll-container');
document.querySelector('.scroll-next').addEventListener('click', function() {
  container.scrollBy({ left: 300, behavior: 'smooth' });
});
document.querySelector('.scroll-prev').addEventListener('click', function() {
  container.scrollBy({ left: -300, behavior: 'smooth' });
});

Conclusion

Le scroll horizontal CSS offre une expérience moderne et légère. Cas d'usage :

• Galeries de logos clients
• Carousels de témoignages
• Timeline horizontale