防止iOS WebApp中的水平滚动

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;
}

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

Answer 1

那么,上面的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在用户旋转屏幕时发生的错误.但是,实现所需功能的最恰当方法是:

• 使用隐藏溢出的父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.
};
};
};