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.