如何在过渡重新定位元素后防止滑动答案

【问题标题】：How to prevent swipe after an element has been repositioned by a transition如何在过渡重新定位元素后防止滑动
【发布时间】：2015-08-12 18:42:45
【问题描述】：

我创建了一个隐藏的侧边栏导航菜单，当它可见时 - 将站点包装（页面的主要内容）移动到右侧以显示菜单：

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

这一切都如我所愿，但问题出在移动设备上，当用户开始尝试在页面上滑动时。如果您触摸站点环绕的左边缘并将其拖动到左侧，它会沿该方向滚动页面 - 就像将站点环绕拖回其后面的导航元素一样。

我尝试在正文中添加两种溢出的变体，但这没有效果：

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

我确实添加了以下完全阻止触摸手势的 jquery：

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;
    }

});

但这不是理想的情况，因为我想尽可能保留垂直滚动，并防止水平滚动/滑动/拖动/随便你想调用它。

我正在努力解决这个问题的部分原因是因为我不完全确定要搜索什么，它似乎不是传统意义上的滚动，更多的是在页面周围拖动 div。

演示问题的链接是：

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

（显然只能在移动设备上重新创建）。我希望这有助于说明问题，因为这不是我用语言解释的最简单的事情。

* 12/08 更新 *

不幸的是，这个问题仍然存在。

当您在移动设备上向上滑动时，该问题还体现在站点包装和 .navigation 滚动中。我希望能够告诉 site-wrap 只是停留在原地并且不要移动一英寸，无论你如何滑动，并且只允许在导航菜单中垂直滚动/滑动。

我已经做到了，当您打开菜单时，overflow: hidden 被添加到 body 中，overflow: auto 被添加到导航中。这适用于桌面完美！当你滚动时，只有导航移动，身体完全冻结。但在移动设备上，它似乎完全没有效果。

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

非常感谢任何帮助。

【问题讨论】：

编辑此内容以显示解决问题的其他尝试。

标签： javascript jquery html css

【解决方案1】：

我现在（大部分）已经解决了这个问题。我认为我所做的编辑是另一个问题，我将单独提出。

为了其他可能阅读此内容的人的利益，为了防止站点包装容器因缺少更好的词而“可滑动” - 从而可以在它拥有之后在屏幕上的各个方向拖动它在打开导航菜单时重新定位 - 我不得不使用 overflow: hidden

我最初尝试过这个，但我出错的地方是将它应用到身体上，根据这个线程在移动设备上不起作用：

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

我在 body 中添加了另一个 div，包含我的所有内容并应用了溢出：隐藏到 body 和这个新 div（皮带和大括号），然后解决了问题。

现在，当单击汉堡图标后站点包装向右移动时，无法在移动设备的屏幕上拖动/滑动它。

【讨论】：