阻止iOS WebApp中的水平滚动 [英] Prevent horizontal scroll in iOS WebApp

问题描述

之前我遇到过类似问题，无法真正理解变通方法，所以我最终依靠像iScroll这样的插件。这是非常简单的任务，我拒绝为它包含一个插件 - 我想要的是阻止iOS中的水平滚动。这包括可能在页面上但不可见的任何内容的橡皮筋效果。

据我所知，我需要首先禁用橡皮筋然后将触摸滚动应用到一个容器元素（我给了idtouch）。不知道这是正确的做法吗？

  $（document）.bind（'touchmove'，function（e）{
 if（！e.target =='#touch'）{
 e.preventDefault（）; 
} 
}）; 
  

风格#touch

  -webkit-overflow-scrolling：touch; 
 overflow：hidden; 
身高：100％; 
 @media唯一屏幕和（max-width：768px）{
 width：768px; 
} 
  

这并不妨碍横向宽度始终保持在728px，但是，用户仍然能够滚动并查看隐藏的内容。想法？

解决方案

好吧，上面的元素是有用的：

 < meta content =yesname =apple-mobile-web-app-capable/> 
   

它们可以防止Safari在用户旋转屏幕时发生的错误。但是，实现所需功能的最合适的方法是：使用隐藏了溢出的父div，并确保高度为0。这个div是有限的根据视口和一个子div与溢出：自动或CSS 3溢出 - Y：滚动。因此，基本上，如果子div内的内容大小超过子级的默认大小，则可以垂直/水平滚动浏览它。由于父级已隐藏，子级以外的内容将不会显示，因此您将获得正确的滚动效果。 **另外，如果您使用overflow：隐藏并阻止所有touchEvents的默认设置，则不会出现滚动或奇怪的浏览器行为。** JavaScript，确保DOM中的每个元素都根据视口进行缩放，因此请避免使用尽可能多的元素的静态大小。 绑定touchStart，touchMove和touchEnd事件。除非touchMove事件也被监听，否则Safari并不总是触发touchEnd事件。即使它只是一个占位符，也要放在那里以避免Safari中的不一致行为。

水平滑动有两种可能：加载新内容的方式相同div后，你检测幻灯片的方向或填充所有元素的子div，你很好去实际移动其父母的边缘/位置，以'滚动'。动画可以用于一个闪烁的界面。

绑定您的触摸事件侦听器。我不知道你正在使用什么库或事件管理系统，但没关系。只需调用相应任务的相应功能即可。

获取幻灯片方向（左/右）：

  var slideBeginX; 
 function touchStart（event）{event.preventDefault（）; //始终阻止默认的Safari动作
 slideBeginX = event.targetTouches [0] .pageX; 
}; 
 
 function touchMove（event）{
 event.preventDefault（）; 
 //无论你想在这里添加什么
}; 
 
 function touchEnd（event）{
 event.preventDefault（）; 
 var slideEndX = event.changedTouches [0] .pageX; 
 
 //现在添加一个最小滑动距离，以便页面上的链接仍然可点击
 if（Math.abs（slideEndX  -  slideBeginX）> 200）{
 if （slideEndX  -  slideBeginX> 0）{
 //表示用户从左向右滚动
} else {
 //这意味着用户从右向左滚动。 
}; 
}; 
}; 
  

I've encountered similar problems before and could never really understand the workarounds, and so I ended up relying on plugins like iScroll. This is such simple task that I refuse to include a plugin for it - what I want is to prevent horizontal scroll in iOS. This includes the rubber band effect for any content that might be on the page but that isn't visible.

From what I understand I need to disable the rubber band altogether first and then apply the touch scroll to a container element (which I've given the id "touch"). Not sure if this is the right approach?

$(document).bind('touchmove', function(e) {
  if (!e.target == '#touch') {
    e.preventDefault();
  }
});

Style for #touch

-webkit-overflow-scrolling: touch;
overflow: hidden;
height: 100%;
@media only screen and (max-width: 768px) {
  width: 768px;
}

This doesn't prevent the horizontal width from staying at 728px however, the user is still able to scroll and see the hidden content. Ideas?

解决方案

Well, the above metas are useful as such:

<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" />

They prevent that bug in Safari that happens when the user rotates the screen. However, the most proper way to accomplish the desired functionality is:

• Use a parent div with overflow hidden and make sure the height of this div is limited according to the viewport and a child div with overflow:auto or the css 3 overflow-y:scroll. So basically if the size of the content inside the child div exceeds the default size of the child, you can vertically/horizontally scroll through it. Because the parent has overflow:hidden, the content outside of the child will not be displayed, so you get a proper scroll effect. ** Also, if you use overflow: hidden and prevent default for all touchEvents, there will be no scrolling or weird browser behavior**

• With the help of JavaScript, make sure that every element in the DOM is scaled according to the viewport, so avoid using static sizes for as many elements as possible.

• Bind the touchStart, touchMove and touchEnd events. Safari doesn't always fire a touchEnd event unless a touchMove event is listened for as well. Even if it's just a placeholder, put it there to avoid the inconsistent behavior in Safari.

• Horizontal sliding is possible in two ways: load new content in the same div after you detect the slide direction or populate that child div with all the elements and you are good to go and actually shifting the margins/position of the child inside it's parent to 'scroll'. Animation can be used for a slicker interface.

• Bind your touch event listeners. I don't know what library or event management system you are using, but it doesn't matter. Just call the respective function for the respective task.

• Get the slide direction(left/right):

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

这篇关于阻止iOS WebApp中的水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！