I have this sandbox here, it's an implimentation of two off canvas menus left and right, it's meant to feel native on a mobile by allowing you to drag across to reveal a menu. For the most part it's working well, not a lot of JavaScript is used and the idea isn't really complex which is nice because this sort of thing used to be a real pain.
What I am wondering is how can I force it to scroll one at a time either in js or css. You can over scroll from one side to another with a little force. I want to swipe hard and always arrive in the middle the swipe again to open the other menu.
The sandbox probably doesn't work in this embedded frame so you might have to view the code.
Top comments (3)
Sorry, I have no aid to give this time around, but I just wanted to say that I’m viewing this on tbe iOS DEV app, the embedded sandbox works, and I really like the experience! 😄
I look forward to seeing the outcome here.
That's nice to know thanks Daniel I'm carrying on building with this technique and will probably refine with JavaScript later.
scroll-snap-stop: always;this stops over-scrolling! here is V2