On mobile portrait (only) my shopping cart is not fully scrollable but instead the background scrolls.
Why is that and how can I fix it?
Thank you!
Anybody?
I can’t figure out how to solve this.
Thank you!
Thank you, Stan!
I looked at this and other posts here in the Forum.
I found a method that kinda worked – but then it didn’t.
See my comments on the bottom of this topic:
I hope to still find a way to make this work!
hi @Rapha can you publish your site i can check on real device?
I always find browser search better than search in forum it self type in your favourite browser “prevent scroll on modal webflow”
here are examples
https://webflow.com/website/Stop-the-page-from-scrolling-when-a-modal-is-open
https://webflow.com/website/Lock-Body-Scroll-Including-iOS?s=body-scroll-lock
good luck
1 Like
Thanks again, Stan.
Sure:
https://preview.webflow.com/preview/ornament-is-crime?utm_medium=preview_link&utm_source=designer&utm_content=ornament-is-crime&preview=67d6cc255726c5fa9db030eebf3f2545&workflow=preview
All the solutions suggested here, and others I find, are dealing with menus or custom popups. They’re using a similar method (class adder and removal).
The reason I can’t get any of these methods to work with the cart is that by default, clicking outside the cart container closes the cart but does not trigger the removal of the non-scroll class on the body. So when the user clicks outside the cart, the cart disappears but the body is still frozen so the page can’t be scrolled. Not good.
I tried some tweaks on this one:
as follows:
I tried to give the body the same removal class. but that doesn’t do the trick as that requires clicking twice outside the cart wrapper – it instead causes other issues on the page. Neither does an added div outside of the Cart Wrapper (no matter what z-level). And adding that same removal class to the Cart Wrapper itself won’t work, for obvious reasons.
Adding another full width/height background to the native cart wrapper and adding the removal class to that may have been a work-around but the native WF cart wrapper doesn’t allow for adding another div to the cart wrapper.
I feel like I’m so close but yet, can’t figure out how to work around the above issue.
Any ideas?
I can’t be the only one experiencing that issue with the cart wrapper stuck on mobile portrait.
I find solutions here for the issue in general but the cart differs from these (as explained above).
Either I’m not explaining myself correctly or I’m not getting the obvious, or it’s just one little thing I’m missing, one element that needs to be changed… I just can’t figure it out.
Frustrating!
Help would be highly appreciated! Thank you!
hi @Rapha IMHO it is glitch in WF modal cart settings as it doesn’t work only when background move for certain amount and wen is moved further it will start as should again. My conclusion fixing BG scroll would not fix this issue and WF should look into it.
EDIT:
Here is short video where I pointing to where the issue IMO is. I have tried to force page not scroll but no luck. But Im not using WF e-commerce at all so I used only free template and as Im describing in video I’m not sure if issue is related to this free template or cart wrapper it self or only to modal component. So may be someone who is creating pro templates can explain how to.
Thanks, Stan!
Are you sure it’s not just me doing something wrong?
Just to clarify: I didn’t use a template. I built it from scratch (I’m using the built-in, native cart which can be designed to a certain extent).
I wish I was fluent in Javascript. I’m sure there’s a way to fix this.
I hope either WF can fix that glitch (if that’s what this is) or someone well experienced with WF Ecommerce who’s come across this issue has found a workaround.
Fingers crossed.
Thanks in advance!
I have to assume that other WF users found some sort of solution as otherwise the cart is not very useful on mobile.
I was also assuming that, if there’s a way to get around the “locked” Cart Wrapper and access its settings by means of a Javascript “hack”, one of the modal freeze methods may actually work.
Wishful thinking I guess…?
Anyhow. If you’re convinced that this is truly a WF glitch we should maybe post it to the wish list, no?
hi @Rapha based on my short experience with Cart wrapper element I’m convinced that is a WF element implementation issue. I can say that I have no problem to write JS but why to spend time on debugging and searching for solution or some kind of hack that will fix things that should work from day one the way they should. My conclusion is based on other glitches I have recently found in WF.
Fair enough, Stan.
Seems like nobody here has a solution or knows of a hack so far anyway.
I’ll add it to the wishlist.
Please feel free to edit/add as I’m not sure if I’m describing the issue well.
Adding a short video here too in case someone comes across this.
Thanks!
Hey @Rapha , could you try these changes on your mobile mode? This suggestion stems from the fact that your cart takes up the whole height and is really narrow.
The result I get is the following:
The height of the cart in px is not recommended personally, I would use either % values so it adheres to the different heights of the phone. In landscape mode, the height could be changed to a px value as the height real estate is far less and a % value will shrink the Cart Container.
2 Likes
The % width/height seems to do the trick. No extra code necessary.
No background scroll or cart freeze.
Phantastic!
Thank you so much!!
Rapha
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.