Page structure:
<body>
<section id="off-right'></section>
<main></main>
</body>
The off-right section is initially translated out of view, and I translate it back onto the page on top of <main> with HammerJS, when dragging straight left and right, which works fine. The problem is when I touch the screen, start scrolling up or down, and then without taking my finger off, move it to the left. This moves the whole <main> left. I want it to just scroll up/down.
Current things I'm doing:
body and main are both width: 100%, max-width: 100%, overflow-x: hidden
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
var offset = window.pageXOffset;
$(window).scroll(function () {
if(offset != window.pageXOffset)
window.scrollTo(0, window.pageYOffset);
});
var options = {
dragLockToAxis: true,
dragBlockHorizontal: true
};
var hammertime = new Hammer(element, options);
hammertime.on("dragleft dragright swipeleft swiperight", function(ev){
ev.gesture.preventDefault();
// code for moving #off-right
});
I'm looking for a solution that maintains native browser vertical scrolling (so not doing a Hammer dragup/down handler that preventDefault()s and sets window.scrollTo, and figuring out my own physics/timing for continuing scrolling after the user lets go on an up/down swipe).
