How to disable vertical scroll while enable swipeleft and swiperight event using jquery mobile?

Question

I have a html jquery mobile multi-page and using swipeleft and swiperight events to flip pages. it works great.

Now I wanna disable the vertical scroll.

From solution I found in stackoverflow, it suggest to use the following

$(document).delegate('.ui-content', 'touchmove', false);

but in this case, the original swipeleft and swiperight events are disabled too.

Is there a way that I can disable the vertical scroll while keeping the swipeleft and swiperight events?

if you are disabling vertical scroll; arent your pages already smaller than the viewport? — Nirmal Patel, Aug 31 '12 at 10:44

score 0 · Accepted Answer · answered Aug 31 '12 at 07:47

0

You could add the following to your

<script>
    function BlockMove(event) {
      // Tell Safari not to move the window.
        event.preventDefault();
    }
    </script>

and add this to your body tag

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);" ontouchmove="BlockMove(event);">

This will disable the page scrolling allowing you to swipe

answered Aug 31 '12 at 07:47

ngplayground

Hi Donald, it works. Thanks. But may I ask what is the purpose of setting the timeout function? And now every time after page flip, it take a while for the content to get focus. i.e. texts in pages are a bit blur and become clear within 1 seconds. – Bowie Sep 03 '12 at 06:56
Here is another script which is really cool and allows for a lot of options... no more than 50 lines of JS. http://stackoverflow.com/questions/10357844/how-to-disable-rubber-band-in-ios-web-apps – Anthony Graglia Jan 31 '13 at 08:39

1 Answers1