Question

之前我遇到过类似的问题，但却无法真正了解解决方法，因此我最终依赖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像素，但用户仍然可以滚动并查看隐藏的内容。想法？

Answer 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：auto或css 3 overflow-y：scroll来限制此div的高度。所以基本上如果子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.
};
};
};

Answer 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>

Answer 3

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

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

如果您不关心垂直滑动，您也可以尝试以下代码 -

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

希望它有所帮助。

Answer 4

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

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

即使完全符合用户的页面仍然能够将页面拉伸得比它应该能够更宽，你必须使用视口防止这种情况，没有别的办法......

防止iOS WebApp中的水平滚动

4 个答案: