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.

6
  • 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 2, 2014 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 2, 2014 at 15:10
  • note that jQM custom builds aren't prefect for production. You can create your own simple swipe events javascriptkit.com/javatutors/touchevents3.shtml
    – Omar
    Oct 2, 2014 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 2, 2014 at 15:17
  • Check this jQM stops scroll event to fire.
    – Omar
    Oct 2, 2014 at 15:22

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.