1

I am trying to implement a slide-in menu for a responsive page, which appears when the device size is small. I used Bootstrap Simple Sidebar and added a top toolbar that appears when the screen width is small, which has a button to slide-in or slide-out the menu. All works well.

I am now trying to also trigger the event to slide in or out the menu using swipe left and swipe right gestures. I added JQuery Mobile (custom build with only events included). The event triggers fine, my code looks something like this.

<script>
    $(document).on("swiperight",function(e){
        if ($('.smallscreen-toolbar').is(':visible')) {
            e.preventDefault();
            if (!$("#wrapper").hasClass("toggled"))
            {
                $("#wrapper").addClass("toggled");
            }
        }
    });

    $(document).on("swipeleft",function(e){
        if ($('.smallscreen-toolbar').is(':visible')) {
             e.preventDefault();
            if ($("#wrapper").hasClass("toggled"))
            {
                $("#wrapper").removeClass("toggled");
            }
        }
    });
</script>

The problem I have is that during the swipe left gesture (to close the menu), the page (which would be offset to the right) performs horizontal scrolling. When I tested it using Chrome's emulator I also got this error message: Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted., which I presume is related.

I am trying to cancel the event using e.preventDefault(). Isn't this the right way? How do I block horizontal scrolling events (without blocking vertical scrolling)?

I also tried to put overflow-x: hidden on the html, body and the <div> wrapping my content but when its margin is offset to the right (when the menu is visible) I can still drag it and move it around. If I bind an event to touchmove and do e.preventDefault() during it I block everything, including swipes.

jbx
  • 21,365
  • 18
  • 90
  • 144
  • if you want touch events, use hammer.js instead of jQM custom built. Also, `body` or _wrapper_ should have `overflow-x: hidden` to avoid horizontal scroll. – Omar Oct 02 '14 at 15:02
  • I tried adding `overflow-x: hidden` on all of them, the `html`, `body`, the outer page wrapper and the inner page wrapper (that is being offset to the right when the menu comes up), it doesn't have any effect. Why would `hammer.js` make any difference? Seems like a simple JS event handling issue to me, that I just can't get to work. – jbx Oct 02 '14 at 15:10
  • note that jQM custom builds aren't prefect for production. You can create your own _simple_ swipe events http://www.javascriptkit.com/javatutors/touchevents3.shtml – Omar Oct 02 '14 at 15:15
  • Its not that they are not working fine. Its just that I want to disable horizontal scrolling when they happen. But I'll have a look, maybe I can get the event, disable it and throw swipe instead, not sure. Thanks. – jbx Oct 02 '14 at 15:17
  • Check [this](https://github.com/jquery/jquery-mobile/blob/766a03dae49bf3c0fcb9bd0bb6dd155c1821356e/js/events/touch.js) jQM stops scroll event to fire. – Omar Oct 02 '14 at 15:22
  • I had similar error, under different circumstances. I used return true (not prevent default), as suggested here: http://stackoverflow.com/a/27286193/1329712 – Norman Cousineau May 28 '15 at 19:28

0 Answers0