防止iOS WebApp中的水平滚动
我以前遇到类似的问题，永远不能真正理解变通办法，所以我最终依靠像iScroll这样的插件。 这是非常简单的任务，我拒绝为它包含一个插件 – 我想要的是防止iOS中的水平滚动。 这包括可能在页面上但不可见的任何内容的橡皮筋效果。
从我的理解，我需要先禁用橡皮筋，然后将触摸滚动应用到一个容器元素（我给了id“触摸”）。 不知道这是否正确？
$(document).bind('touchmove', function(e) { if (!e.target == '#touch') { e.preventDefault(); } }); 风格＃触摸
-webkit-overflow-scrolling: touch; overflow: hidden; height: 100%; @media only screen and (max-width: 768px) { width: 768px; }
这并不妨碍水平宽度保持在728px，但用户仍然可以滚动并查看隐藏的内容。 想法？
那么，上面的元素是有用的：
<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中的错误，当用户旋转屏幕时发生。 但是，完成所需function的最正确的方法是：
-
使用隐藏溢出的父div，并确保这个div的高度是有限的，根据视口和一个子div与溢出：自动或CSS 3溢出Y：滚动。 所以基本上，如果子div内的内容大小超过子的默认大小，可以垂直/水平滚动浏览。 由于父级已经溢出：隐藏，子级以外的内容将不会显示，因此您将获得正确的滚动效果。 **另外，如果您使用overflow：hidden并防止所有touchEvents的默认设置，则不会出现滚动或奇怪的浏览器行为**
-
在JavaScript的帮助下，请确保DOM中的每个元素都根据视口进行缩放，因此请避免使用尽可能多的元素的静态大小。
-
绑定touchStart，touchMove和touchEnd事件。 除非触摸touchMove事件，否则Safari不会触发touchEnd事件。 即使它只是一个占位符，放在那里以避免Safari中的不一致的行为。
-
水平滑动可以通过两种方式实现：在检测到滑动方向后，在同一个div中加载新内容，或者使用所有元素填充该子div，并且您可以将其父元素的边距/ '滚动'。 animation可以用于一个更清晰的界面。
-
绑定您的触摸事件监听器。 我不知道你正在使用什么库或事件pipe理系统，但没关系。 只需调用相应任务的相应function即可。
- 获取幻灯片方向（左/右）：
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. }; }; };
这个工作适用于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>
以下的链接可能对你有用，在这里垂直是禁用和水平启用，你只需要调整一下你的目的代码。
jQuery的工具-触摸水平仅-禁用垂直触
如果你不关心垂直滑动，你也可以尝试下面的代码 –
document.ontouchmove = function(e){ e.preventDefault(); }
希望能帮助到你。
如果你不使用元，你将永远得到一个橡皮筋效果。
<meta name="viewport" content="width=device-width" />
即使页面完全符合用户仍然能够拉伸的页面比它应该能够去，你必须使用视图端口来防止这一点，没有其他的方式…