How to prevent swipe after an element has been repositioned by a transition

Question

I've created a hidden sidebar navigation menu which, when made visible - moves the site-wrap (main content of the page) to the right to expose the menu:

.nav-trigger:checked + label, .nav-trigger:checked ~ .site-wrap {
    left: 16.5em;
}

This all works as I would hope, but the problem is one that arises on mobile, when the user begins trying to swipe around the page. If you touch the left edge of the site wrap and drag it to the left, it scrolls the page in that direction - as if it was dragging the site wrap back across the navigation element behind it.

I have tried adding two variations of overflow hidden to body, but this has no effect:

body{
    background: @bodyColor;
    color: @headerColor;
    font-family: @openSans;
    font-size: 16px;
    overflow-x: hidden;
    overflow: hidden;
}

I did add the following jquery which prevented touch gestures entirely:

var touchDisabled = false;
$("#nav-trigger").click(function(){

    if( touchDisabled == false ){

        $(document).bind('touchmove', function(e) {
            e.preventDefault();
        });
        touchDisabled = true;

    }else{

        $(document).unbind('touchmove');
        touchDisabled = false;
    }

});

but this is not the ideal situation as I'd like to retain vertical scroll if possible, and prevent horizontal scroll/swipe/drag/whatever-you-want-to-call-it.

Part of the reason I'm struggling to solve this is because I'm not entirely sure what to search for, it doesn't seem to be a scroll in the traditional sense, more dragging the div around the page.

The link to demonstrate the problem is:

http://streeten-new.streeten.co.uk/

(obviously only recreatable on mobile). I hope this helps to illustrate the problem as it's not the easiest of things for me to explain in words.

* 12/08 update *

Still having this problem unfortunately.

The problem also manifests itself in both the site-wrap and the .navigation scrolling at the same time as you swipe up on mobile. I would like to be able to tell site-wrap to just stay in place and don't move an inch, no matter how you swipe, and just allow vertical scroll/swipe in the navigation menu.

I've made it so that when you open the menu, overflow: hidden is being added to body and overflow: auto is being added to the navigation. This works perfectly on desktop! When you scroll, only the nav moves and the body is completely frozen. But on mobile it seems to have absolutely no effect.

$("#hamburger").click(toggleMenu);

var menuOpen = false;
    function toggleMenu(){
        $(".site-wrap, header").toggleClass("slideRight");
        $(".navCover").toggleClass("slideRight");
        $("#logo").toggleClass("slideLeft");

        $("body, #fouc").toggleClass("preventScroll");
        $(".navigation").toggleClass("allowScroll");

        window.setTimeout(function(){
            $("header button").toggleClass("slideLeft");
        }, 250);
        if (menuOpen == true){
            menuOpen = false;
        }else{
            menuOpen = true;
        }
    }

.preventScroll{
    overflow: hidden;
}

.allowScroll{
    overflow: auto;
}

Any help much appreciated.

Edited this to show additional attempts at resolution. – Luke Twomey Aug 12 '15 at 09:45 — Luke Twomey, Aug 12 '15 at 09:45

score 0 · Accepted Answer · edited May 23 '17 at 11:51

I have now (mostly) resolved this. I think the edit I made is another issue which I will raise separately.

For the benefit of others who may read this, in order to prevent the site-wrap container from being "swipeable" for want of a better word - whereby it was possible to drag it around the screen in every direction after it had been repositioned on opening the navigation menu - I had to use overflow: hidden

I had initially tried this, but where I went wrong was applying it to the body, which according to this thread doesn't work on mobile:

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

I added another div within body, containing all my content and applied overflow: hidden to both body and this new div (belt and braces), which then resolved the issue.

Now when the site-wrap has been shifted to the right after clicking the hamburger icon, it is impossible to drag/swipe it around the screen on mobile.

How to prevent swipe after an element has been repositioned by a transition

1 Answers1