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.

page always scrolls vertically. you mean disable swipe left and right? — Omar, Oct 17 '13 at 08:39

score 1 · Answer 1 · answered Oct 17 '13 at 07:07

1

Have you tried like this

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

Better make a css separate for mobile.

answered Oct 17 '13 at 07:07

Praveen

55,303
33
133
164

I want to disable horizontal scroll when the panel is opened and allow horizontal scroll when the panel is closed. css("overflow-x", "hidden") is required, but I don't know how to combine this with the stopScroll function. – joyspeed Oct 17 '13 at 07:15
Unfortunately $("html, body").css("overflow-x", "hidden"); is not working without disabling touchmove. – joyspeed Oct 17 '13 at 07:24
@joyspeed you mean to disable `touchmove`? – Praveen Oct 17 '13 at 07:25

score 0 · Answer 2 · answered Nov 08 '13 at 14:40

$(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;
        }
    });

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

2 Answers2