防止 iOS WebApp 中的水平滚动答案

【问题标题】：Prevent horizontal scroll in iOS WebApp防止 iOS WebApp 中的水平滚动
【发布时间】：2012-10-04 20:04:55
【问题描述】：

我以前也遇到过类似的问题，但一直无法真正理解解决方法，所以我最终依赖于 iScroll 之类的插件。这是一个如此简单的任务，我拒绝为它包含一个插件——我想要的是防止 iOS 中的水平滚动。这包括可能在页面上但不可见的任何内容的橡皮筋效果。

据我了解，我需要先完全禁用橡皮筋，然后将触摸滚动应用到容器元素（我给它的 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;
}

这不会阻止水平宽度保持在 728 像素，但用户仍然可以滚动并查看隐藏的内容。想法？

【问题讨论】：

您可以为此使用媒体查询 -> <meta name="viewport" content="width=device-width" /> 这会将页面的宽度锁定为与设备相同的宽度，从而防止水平滚动。这对你有用吗？
抱歉，我不能使用视口，因为它会缩小太多（使用媒体查询来专门设置 iOS 设备的内容大小）。
当。那我就没主意了。对不起:(
Np，感谢您的调查。为什么要这么难？我一直对开发 iOS 兼容性存在多少问题感到惊讶。

标签： javascript html ios css horizontal-scrolling

【解决方案1】：

嗯，上面的元数据是很有用的：

<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 中用户旋转屏幕时发生的错误。但是，完成所需功能的最合适方法是：

使用隐藏溢出的父 div 并确保此 div 的高度根据视口和具有 overflow:auto 或 css 3 overflow-y:scroll 的子 div 受到限制。所以基本上如果子 div 内的内容的大小超过了孩子的默认大小，你可以垂直/水平滚动它。因为父级有overflow:hidden，子级以外的内容不会显示出来，所以得到了合适的滚动效果。 ** 此外，如果您使用溢出：隐藏并阻止所有触摸事件的默认设置，则不会出现滚动或奇怪的浏览器行为**
在 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.
};
};
};

【讨论】：

Alex，感谢您提供如此详尽的回答！我以前见过类似的解决方案，但始终无法理解这个概念。您在此处的示例很好地说明了这一点。

【解决方案2】：

这适用于我在 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>

【讨论】：

【解决方案3】：

以下链接可能对您有用，此处禁用垂直并启用水平，您只需根据您的目的稍微调整代码。

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

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

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

希望对你有帮助。

【讨论】：

【解决方案4】：

如果您不使用元数据，您将总是获得橡皮筋效果。

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

即使页面完全适合用户，仍然可以将页面拉伸得比它应该能够走的更宽，您必须使用视口来防止这种情况发生，没有其他办法...

【讨论】：