阻止iOS中的水平滚动WebApp

我以前遇到过类似的问题，无法真正理解变通方法，所以我最终依靠像iScroll这样的插件。这是非常简单的任务，我拒绝为它包含一个插件 - 我想要的是阻止iOS中的水平滚动。这包括可能在页面上但不可见的任何内容的橡皮筋效果。阻止iOS中的水平滚动WebApp

从我的理解，我需要先禁用橡皮筋，然后将触摸滚动应用到容器元素（我给了id“touch”）。不知道这是否正确？

$(document).bind('touchmove', function(e) { 
    if (!e.target == '#touch') { 
    e.preventDefault(); 
    } 
});

风格#touch

-webkit-overflow-scrolling: touch; 
overflow: hidden; 
height: 100%; 
@media only screen and (max-width: 768px) { 
    width: 768px; 
}

这并不妨碍水平宽度滞留在728px但是，用户仍然能够滚动看到隐藏的内容。想法？

来源

2012-10-14 Staffan Estberg

您可以对此使用媒体查询 - >''这会将页面的宽度锁定为与设备相同的宽度防止水平滚动。这对你有用吗？ – Ohgodwhy

对不起，但我不能使用视口，因为它会缩小太多（使用媒体查询专门为iOS设备设计内容大小）。 –

当。那我就没有想法了。对不起：（ – Ohgodwhy

好了，上面METAS是有用的这样：

<meta content="yes" name="apple-mobile-web-app-capable" /> 
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" />

他们避免在Safari中，当用户旋转屏幕，发生这个bug。然而，为了实现所需的功能最正确的方法是：

使用父DIV与溢出隐藏，并确保这个div的高度是根据视口溢出时孩子的div限制：自动或css 3溢出-y：滚动。因此，基本上，如果子div内的内容大小超过子级的默认大小，则可以垂直/水平滚动浏览它。由于父级已隐藏，子级以外的内容将不会显示，因此您将获得正确的滚动效果。 **另外，如果您使用overflow：hidden并且防止所有touchEvents的默认设置，将不会出现滚动或奇怪的浏览器行为**
在JavaScript的帮助下，确保DOM中的每个元素都根据到视口，所以避免使用尽可能多的元素的静态大小。
绑定touchStart，touchMove和touchEnd事件。除非touchMove事件也被监听，否则Safari并不总是触发touchEnd事件。即使它只是一个占位符，也要放在那里以避免Safari中的不一致行为。
水平滑动可能有两种方式：在检测幻灯片方向后，在同一div中加载新内容，或者使用所有元素填充该子div，然后切实移动边缘/位置孩子是父母的'滚动'。动画可以用于一个闪烁的界面。
绑定您的触摸事件侦听器。我不知道你正在使用什么库或事件管理系统，但没关系。只需调用相应任务的相应功能即可。
获取滑动方向（左/右）：

var slideBeginX; 
function touchStart(event){event.preventDefault();//always prevent default Safari actions 
    slideBeginX = event.targetTouches[0].pageX; 
}; 

function touchMove(event) { 
event.preventDefault(); 
// whatever you want to add here 
}; 

function touchEnd(event) { 
event.preventDefault(); 
var slideEndX = event.changedTouches[0].pageX; 

// Now add a minimum slide distance so that the links on the page are still clickable 
if (Math.abs(slideEndX - slideBeginX) > 200) { 
if (slideEndX - slideBeginX > 0) { 
// It means the user has scrolled from left to right 
} else { 
// It means the user has scrolled from right to left. 
}; 
}; 
};

来源

2012-10-20 20:43:21 flavian

亚历克斯，谢谢你这样一个彻底的答案！我见过以前也有类似的解决方案，但是永远无法理解这个概念。这里的例子很好地解释了它。 –

如果你不使用元，你会总是得到橡皮筋效果。

<meta name="viewport" content="width=device-width" />

即使安装完全用户将仍然能够舒展网页宽度比它应该是能去的页面，您必须使用视口，以防止这一点，有没有其他办法？

来源

2012-10-19 01:11:40 lededje

这个工作适用于Android，iPhone和iPad。

<!doctype html> 
<html> 
    <head> 
     <meta content="yes" name="apple-mobile-web-app-capable" /> 
     <meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" /> 
     <title>Main</title> 
    </head> 
    <body> 
... 
    </body> 
</html>

来源

2012-10-20 02:18:28

以下链接可能对你有用，这里纵是禁用和水平启用，您只需要调整的代码有点为你目的。

jquery-tools-touch-horizontal-only-disable-vertical-touch

如果你不关心垂直滑动，你可以试试下面的代码也 -

document.ontouchmove = function(e){ 
    e.preventDefault(); 
}

希望它能帮助。

来源

2012-10-20 23:09:33

阻止iOS中的水平滚动WebApp

回答

相关问题