Comment bloquer le scroll lorsque le menu sur smartphone ou fullscreen est ouvert ?

Améliorer l'expérience utilisateur

La concentration de l'utilisateur

Lorsque les utilisateurs ouvrent un menu mobile, leur intention est de naviguer vers une autre partie du site. En bloquant le scroll en arrière-plan, on s'assurer que les utilisateurs restent concentrés sur leur tâche actuelle sans être distraits par le contenu en mouvement derrière le menu.

Clarté visuelle

Un menu mobile qui empêche le scroll en arrière-plan offre une clarté visuelle. Cela réduit la surcharge cognitive en permettant aux utilisateurs de se concentrer uniquement sur les options de navigation, améliorant ainsi l'expérience de navigation globale.

Eviter les erreurs de navigation

La progression de la lecture dans la page est conservée. Pour éviter que les utilisateurs ne défilent accidentellement sur une autre partie du site, bloquer le scroll supprimer toute confusion ou erreur de navigation.

‍Améliorer l'Accessibilité

Créer une navigation simplifiée

Pour les utilisateurs ayant des difficultés de coordination ou utilisant des technologies d'assistance, le blocage du scroll en arrière-plan rend la navigation plus simple et plus intuitive.

Adopter les standards d'accessibilité

Empêcher le scroll en arrière-plan peut aider à répondre aux normes d'accessibilité Web, en fournissant une interface plus contrôlable pour les utilisateurs avec différents besoins.

Empêcher le scroll en arrière-plan lorsque le menu mobile est ouvert est plus qu'une simple fonctionnalité de conception - c'est une composante essentielle d'une expérience utilisateur réussie. En se concentrant sur les détails tels que celui-ci, les concepteurs peuvent créer des sites Web non seulement fonctionnels mais aussi agréables à utiliser, garantissant ainsi une satisfaction et un engagement accrus de l'utilisateur.

Comment bloquer le scroll dans Webflow ?

Pour créer cette fonctionnalité, nous avons besoin d'ajouter du custom code : javascript et CSS.

Définir l'élément déclencheur

Pour exécuter le javascript, attribuer à votre button une classe CSS

1. Sélectionner votre burger menu par exemple
2. Donner-lui la classe "menu-button"

Ajouter le code

Dans les Settings de votre site, aller dans l'onglet Custom code pour ajouter dans la partie Head code le code suivant :

 <style>
  .no-scroll {
    overflow: hidden;
  }
</style>

Cette balise définit le style du Body de nos pages. Le sélecteur de classe no-scroll

Dans la partie Footer code, ajouter le code suivant :

 <script>
  document.addEventListener('DOMContentLoaded', function() {
    let button = document.querySelector(".menu-button");

    button.addEventListener("click", () => {
      document.body.classList.toggle("no-scroll");
    });
  });
</script>

Ce code JavaScript est conçu pour ajouter ou supprimer une classe CSS du Body de la page lorsque l'élément menu-button est cliqué, modifiant ainsi le style de la page avec la règle CSS no-scroll.

‍