Désactiver uniquement le scroll horizontal dans Webflow

Webflow offre un large panel de fonctionnalités pour styliser votre site web. Grâce au panneau de Styles vous pouvez attribuer différentes options de mises en forme à vos éléments. Vous n'avez pas besoin de coder car votre feuille de style css s'actualise automatiquement lorsque vous designer dans Webflow.

Il arrive cependant que certaines fonctionnalités de design ne soit pas encore présentes dans le panneau style de Webflow. Il nous faut parfois ajouter du code personnalisé à nos pages pour appliquer une mise en forme spéciale. Dans notre article du jour, nous allons vous présenter une manière simple de ne désactiver que le scroll horizontal d'un élément.

L'overflow hidden de Webflow n'est pas la solution !

On pourrait se dire dans un premier temps que pour réaliser cette manipulation, nous pouvons sélectionner notre élément et lui appliquer la propriété overflow : hidden dans la section "Size" du panneau de Style. La propriété overflow : auto, ne fonctionne pas tout le temps également.

Or si l'on fait cela, nous remarquons que ce qui dépasse horizontalement ET verticalement de notre élément est caché. Nous allons vous montrer une méthode qui permet de cacher uniquement ce qui dépasse de notre élément horizontalement.

Solution avec la propriété css Overflow-x

Il existe une propriété css qui permet de désactiver uniquement le scroll horizontal d'un élément particulier. La propriété overflow-x nous permet de donner une valeur spécifique en ce qui concerne le dépassement horizontal.

Pour l'utiliser dans Webflow, il suffit de :

• Insérer un élément embed
• Ajouter le code suivant

<style>
.nom-classe { 
  overflow-x : clip; 
}
</style>

Maintenant tous les éléments enfants qui dépassent horizontalement de votre élément sont coupés.

Attention, à l'heure actuelle certains navigateurs comme safari ne supporte pas ce code. Il est donc recommandé d'ajouter du code entre nos balises style pour ces navigateurs. Par exemple, seulement pour safari, nous pouvons utiliser un overflow hidden en ajoutant ce code :

<style>
.nom-classe { 
  overflow-x : clip; 
}

/* Safari 11+ */ 
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) and (stroke-color:transparent) { 
    .nom-classe { 
      overflow : hidden; 
    }
  }
}

/* Test website on real Safari 11+ */ /* Safari 10.1 */
@media not all and (min-resolution:.001dpcm){ 
  @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) { 
    .nom-classe { 
      overflow:hidden; 
    } 
  }
}

/* Safari 6.1-10.0 (but not 10.1) */ 
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ 
  @media { 
    .nom-classe {
      overflow:hidden; 
    }
  }
}
</style>

Si vous souhaitez changer les valeurs de dépassement vertical, vous pouvez faire la même manipulation avec overflow-y.

Pour plus de tips sur Webflow, restez connectés sur notre blog no-code ou retrouvez directement notre article pour créer des boutons de scroll horizontal !