Can I block scrolling on a Webflow page when the left menu is open? How can I achieve this?
TL;DR
- Create a
no-scrollclass withoverflow: hiddenand use Webflow interactions to add it to the<body>when the menu opens and remove it when it closes. - Attach the class toggle to the element triggering the menu and ensure it doesn’t conflict with other interactions.
Yes, you can block page scrolling when the left menu is open in Webflow. You'll need to add a custom interaction that disables scrolling on the <body> while the menu is open.
1. Add a Custom Class to Disable Scrolling
- Create a class (e.g.,
no-scroll) in Webflow. - In the Style panel, set
Overflowto Hidden for both X and Y axes (Overflow: hidden). - This class will be used to disable scrolling on the
<body>.
2. Target the <body> Element
- Select the Body (All Pages) element in the Navigator panel.
- You don’t need to apply any class to it manually, but you will add or remove the
no-scrollclass using interactions.
3. Set Up Page Interaction to Toggle Scrolling
- Go to the Interactions panel.
- Create a Page Trigger or Click Trigger attached to the element that opens/closes the menu (e.g., hamburger icon).
- For Menu Open:
- Add a "Class action".
- Select
Bodyas the element. - Choose Add class, then pick
no-scroll. - For Menu Close:
- Similarly, add a "Class action".
- Select
Bodyas the element. - Choose Remove class, then pick
no-scroll.
4. Avoid Interference from Other Interactions
- If you’re using Webflow’s built-in Navbar component, add this trigger to the Open/Close dropdown or Navbar open/close interactions.
- Make sure transitions don’t conflict by ensuring the body class is managed only in one place.
Summary
To block scrolling when the left menu is open, create a no-scroll class with overflow: hidden, then use interactions to add it to or remove it from the <body> when the menu opens or closes.