在移动设备上禁用垂直滚动

Question

I am using touchmove , touchstart and touchend functions from JQuery Mobile . I am trying to disable vertical scroll while touchstart and enable it back when touchend is triggered. I have tried a few things:

• Adding overflow: hidden to body: This works fine for Chrome browser but doesn't work for firefox android

• Binding and Unbinding scrolling event to body when touchstart event fired and touched fired - Didn't work at all(Im sure I did it wrong). Below is the code.

Code:

$(document).on("touchstart", ".amount-container", function(event){
    $(".notify-cart").addClass("show");
    if(event.touches.length == event.changedTouches.length) {
        monitor = {
            x: event.touches[0].clientX,
            y: event.touches[0].clientY
        };
    }
}).on("touchend", ".amount-container", function(){
    $(".notify-cart").removeClass("show");
    $("body").removeClass("overflowhide");
    monitor = {};
}).on("touchmove mousemove", ".amount-container", function(event){
    if(Math.abs(event.changedTouches[0].clientX - monitor.x) > Math.abs(event.changedTouches[0].clientY - monitor.y)) {

    }
    else{
        event.preventDefault();
    }
});
// To Prevent Scrolling while Swipe/touchmove
var touchScroll = function( event ) {
    event.preventDefault();
};

I tried few other things too. Nothing worked in Firefox. Is there a better way to solve this problem. Let me know if you need anything else.

Answer 1

I'm not positive this'll work, but try replacing

var touchScroll = function( event ) {
    event.preventDefault();
};

with

document.body.addEventListener('touchstart', function(e){e.preventDefault();
});