Scrollen der Seite verhindern wenn eine Webflow Navigation geöffnet ist

Du musst keine weitere Klasse irgendwo hinzufügen. Dieser Code arbeitet mit den Standard Klassennamen von Webflow.

‍Einfach nur diesen Code in den Projekteinstellungen unter Footer Code einfügen, so dass er automatisch auf jeder deiner Seiten ausgeführt wird.

Funktioniert nur bei dem Navigationselement von Webflow. Wenn du das Scrolling bei Popups unterbinden möchtest, empfehle ich die Finsweet Attributes Methode.

<script>    // Stop body scroll when mobile menu is open    const body = document.body;    function letBodyScroll(bool) {        if (bool) {                body.style.overflow = 'hidden';        } else {            body.style.overflow = 'auto';        }    }    const targetNode = document.querySelector('.w-nav-button');    const config = { attributes: true, childList: false, subtree: false };    const callback = function (mutationsList, observer) {        for (let i = 0; i < mutationsList.length; i++) {            if (mutationsList[i].type === 'attributes') {                const menuIsOpen = mutationsList[i].target.classList.contains('w--open');                letBodyScroll(menuIsOpen);            }        }    };    const observer = new MutationObserver(callback);    observer.observe(targetNode, config);</script>

Gefunden im Webflow Forum.

Diese Lösung erkennt die CSS-Klasse, die Standardmäßig von Webflow in der Navigation vergeben wird und reagiert entsprechend darauf. Ist sie vorhanden, wird body auf overscroll hidden gestellt.