6

我以前也遇到过类似的问题，并且永远无法真正理解解决方法，所以我最终依赖于 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 像素，但是，用户仍然可以滚动并查看隐藏的内容。想法？

4

4 回答 4

14

好吧，上面的元数据很有用：

<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 限制此 div 的高度溢出：auto 或 css 3 overflow-y:scroll。所以基本上如果子 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.
};
};
};
于 2012-10-20T20:43:21.600 回答
2

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

jquery-tools-touch-horizo​​ntal-only-disable-vertical-touch

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

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

希望能帮助到你。

于 2012-10-20T23:09:33.093 回答
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>
于 2012-10-20T02:18:28.857 回答
0

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

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

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

于 2012-10-19T01:11:40.530 回答