Question

我创建了一个响应式单页网站，其中包含一个菜单，可以使用以下代码从页面侧面显示：

    if($('#slide-menu-panel').css("margin-right") == "0px"){
    $('#slide-menu-panel').animate({"margin-right": '-=300'});
}else{
    $('#slide-menu-panel').animate({"margin-right": '+=300'});
}

以及菜单元素的以下css：

    #slide-menu-panel{
    width:300px;
    z-index: 51;
    background-color: #2C2C2C;
    visibility: visible;
    right:0px;
    margin-right: -300px;
    border-color: transparent;
    border-style: none;
    position: absolute;
    height:100%;
}

这通常很好，但在iphone上（不是androids或ipads），在菜单上触摸和拖动可以从侧面拉出整个页面，在页面右侧留下一个空白区域。

我在html中使用以下内容：

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1.0; user-scalable=0;"/>

我正在使用http://padilicious.com/code/touchevents/中的代码在用户触摸并拖动主页时滚动背景，但不会在菜单上滚动。

如何阻止用户将页面从右侧拖出并露出空白区？

Answer 1

我不知道为什么会这样，但我通过处理菜单上的ontouchstart事件并丢弃输入来阻止它。

在网站上触摸滚动会显示空白区域

1 个答案: