Question

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

.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。 / p>

证明问题的链接是：

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

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

* 12/08更新*

遗憾的是仍有这个问题。

在移动设备上向上滑动的同时，问题也会出现在网站环绕和.navigation滚动中。无论你如何滑动，我希望能够告诉site-wrap保持原位并且不移动一英寸，并且只允许在导航菜单中进行垂直滚动/滑动。

我已经做到这一点，当你打开菜单时，溢出：隐藏正被添加到正文，溢出：自动正被添加到导航中。这在桌面上运行完美！滚动时，只有导航移动并且主体完全冻结。但在移动设备上似乎完全没有效果。

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

任何帮助都非常感激。

Answer 1

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

为了其他可能阅读此内容的人的利益，为了防止网站包装容器被“刷卡”＆＃34;因为缺少一个更好的单词 - 在打开导航菜单后重新定位后，可以在屏幕上将其拖动到每个方向 - 我必须使用 overflow：hidden

我最初尝试过这个，但是在我出错的地方将它应用到了身体上，根据这个帖子，它并不适用于移动设备：

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

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

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

如何通过转换

1 个答案: