jQuery mobile - allow only vertical scrolling when side panel is opened?

Question

Referencing this I want to allow only vertical scroll.

The following code will disable all touch moves on a panel.

$(document).on("pageinit", "#form1", function (event) {
    $("#navmenu").on("panelopen", function (event, ui) {
        $("body").css("overflow", "hidden").on("touchmove", stopScroll);
    });
    $("#navmenu").on("panelclose", function (event, ui) {
        $("body").css("overflow", "auto").off("touchmove");
    });

    function stopScroll() {
        return false;
    }
});

How can I use "overflow-x: hidden" with the stopScroll function to allow vertical scroll and disable horizontal?

Thanks.

Answer 1

Have you tried like this

$("html, body").css("overflowX", "hidden");

Better make a css separate for mobile.

Answer 2

$(document).on('panelopen', '[data-role="panel"]',function (event) {
    document.ontouchmove = function(e) {
        e.preventDefault();
    }
}).on('panelclose', '[data-role="panel"]', function (event) {
        document.ontouchmove = function(e) {
             return true;
        }
    });