Disabling Body Scroll When Mobile Menu Is Open

Question

Hello tout le monde 👋

J’utilise un hamburger menu en plein écran (100svh) sur tous mes breakpoints, y compris sur desktop.
Je souhaite désactiver le scroll du body quand le menu est ouvert.

Voici ce que j’utilise :

body:has(.nav_wrap .w-nav-button.w--open) {
overflow: hidden;
}

Ça fonctionne, mais j’obtiens un shift du layout à cause de la disparition de la barre de scroll.
J’ai tenté ce contournement, mais la nav bar bouge toujours :

html {
scrollbar-gutter: stable;
}

Au final, je pense à l’appliquer au mobile uniquement et laisser le scroll sur desktop.

Auriez-vous une meilleure idée?

Merci d’avance pour votre aide 🙂

Jean Collin · Answer

Hello Sylvain !  Pas certain de pouvoir t’aider sur ton approche mais j’avais sauvegardé cette vidéo fs qui résous ce problème :)   https://youtu.be/nNx1vBSWTeY?si=N24btZa0MUQbPXEO

Sylvain · Answer

Hello Jean,

Merci pour ta réponse et le lien ! J’ai testé, mais malheureusement, j’obtiens le même résultat : tout le body se décale vers la droite lorsque la barre de scroll disparaît.

Si tu as d’autres idées ou astuces, je suis preneur !

Merci encore pour ton aide 🙂

Valentin Geffroy · Answer

Customize la barre de scroll en css pour la rendre invisible

Sylvain · Answer

Merci Valentin pour ton idée de rendre la barre de scroll invisible.
Pour le body, mon CSS faisait déjà le job et la scrollbar disparaissait bien, mais la navbar se décalait toujours (car elle est en position fixed).

Au final, j’ai trouvé une solution complète en JavaScript pour gérer correctement le scroll du body et empêcher la navbar de bouger.
J’avais besoin de calculer la largeur exacte de la scrollbar (pas possible en CSS).
Je vérifie encore qu’il n’y a aucun bug et je partagerai le code demain.

Encore merci pour vos retours 🙏

Sylvain · Answer

Hello tout le monde!

Comme promis, je pose mon code ici.
Petit rappel sur son utilité : Désactive le défilement de la page lorsqu’un hamburger menu est ouvert (en mode desktop) et empêche le déplacement du body et de la navbar vers la droite après la disparition de la barre de défilement.
Une version de base et une version qui gère aussi les liens vides et les liens d’ancrage (#id)

$(".w-nav-button").on("click", function () {
 $(this).toggleClass("is-open");

if ($(this).hasClass("is-open")) {
  $("html, body").css("overflow", "hidden");
  $(".w-nav, body").css({ "padding-right": scrollbarWidth + "px" });
 } else {
  $("html, body").css("overflow", "");
  $(".w-nav, body").css("padding-right", "");
 }
}); 2. Version qui ferme systématiquement le menu si on reste sur la même page après avoir cliqué sur un lien d’ancrage (venant du menu ou de la navbar) : let scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

$(".w-nav-button").on("click", function () {
 $(this).toggleClass("is-open");

if ($(this).hasClass("is-open")) {
  $("html, body").css("overflow", "hidden");
  $(".w-nav, body").css({ "padding-right": scrollbarWidth + "px" });
 } else {
  restoreScroll();
 }
});

$(".w-nav a, .w-nav button").on("click", function () {
 if (!$(this).is(".w-nav-button")) {
  $(".w-nav-button").removeClass("is-open");
  restoreScroll();
 }
});

function restoreScroll() {
 $("html, body").css("overflow", "");
 $(".w-nav, body").css("padding-right", "");
} J’utilise ici les classes générées par Webflow pour rendre le code “universel”, mais vous êtes libre d’adapter avec vos propres classes si besoin. N’hésitez pas à me dire ce que vous en pensez ou si vous voyez des améliorations possibles ! 🙂

initClub · 1ère Communauté Webflow Francophone

Disabling Body Scroll When Mobile Menu Is Open