I’m having issues with the background-scrolling instead of the open shopping cart (when the cart is open).
There are similar problems with scroll and popup modals mentioned in other posts here, where popups and menus are the villain. In my case it’s the cart, which adds another problem.
The initial problem:
When there are a bunch of products in the cart I can’t scroll down to the total and checkout sections anymore – instead the background scrolls. That’s most obvious on mobile devices.
I tried the F’inSweet class adder method.
See here: Disable body scrolling | Class Adder for Webflow Interactions - YouTube
I use a “Keep Shopping” and an “X” to hide the cart wrapper and to trigger the removal of the no-scroll class at the same time.
Works great!
Except:
By default, the user can also click outside the cart wrapper to hide it. If that happens the cart is now hidden, but the removal of the non-scroll hasn’t been triggered, which means that the whole page (body) is not scrollable, even though the cart is out of the way.
I tried using the body as an added trigger to remove the non-scroll class but of course that’s not a good idea as now any click anywhere on the page would block the scroll, at any given time.
The only other way I could see this work is if there was a way to prevent the cart from hiding when the user clicks outside the cart.
How would I do that though? Any ideas?
Thank you for your help!