Javascript 在 iPhone Web 应用程序中禁用滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2890361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable scrolling in an iPhone web application?
提问by Stefan Kendall
Is there any way to completely disable web page scrolling in an iPhone web app? I've tried numerous things posted on google, but none seem to work.
有没有办法在 iPhone 网络应用程序中完全禁用网页滚动？我已经尝试了很多发布在 google 上的东西，但似乎都没有。
Here's my current header setup:
这是我当前的标题设置：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
doesn't seem to work.
似乎不起作用。
采纳答案by Chait
'self.webView.scrollView.bounces = NO;'
'self.webView.scrollView.bounces = NO;'
Just add this one line in the 'viewDidLoad' of the mainViewController.m file of your application. you can open it in the Xcode and add it .
只需在应用程序的 mainViewController.m 文件的“viewDidLoad”中添加这一行。您可以在 Xcode 中打开它并添加它。
This should make the page without any rubberband bounces still enabling the scroll in the app view.
这应该使没有任何橡皮筋弹跳的页面仍然启用应用程序视图中的滚动。
回答by drawnonward
Change to the touchstartevent instead of touchmove. Under One Finger Eventsit says that no events are sent during a pan, so touchmovemay be too late.
更改为touchstart事件而不是touchmove。在One Finger Events 下，它表示在平移期间没有发送任何事件，因此touchmove可能为时已晚。
I added the listener to document, not body.
我将侦听器添加到文档，而不是正文。
Example:
例子：
document.ontouchstart = function(e){
e.preventDefault();
}
回答by Gajus
document.addEventListener('touchstart', function (e) {
e.preventDefault();
});
Do not use the ontouchmoveproperty to register the event handler as you are running at risk of overwriting an existing event handler(s). Use addEventListenerinstead (see the note about IE on the MDN page).
不要使用该ontouchmove属性来注册事件处理程序，因为您有覆盖现有事件处理程序的风险。请改用addEventListener（请参阅 MDN 页面上有关 IE 的说明）。
Beware that preventing default for the touchstartevent on the windowor documentwill disable scrolling of the descending areas.
请注意，阻止或touchstart上事件的默认值将禁用降序区域的滚动。windowdocument
To prevent the scrolling of the document but leave all the other events intact prevent default for the first touchmoveevent following touchstart:
为了防止文档滚动但保持所有其他事件不变，请防止以下第一个touchmove事件的默认值touchstart：
var firstMove;
window.addEventListener('touchstart', function (e) {
firstMove = true;
});
window.addEventListener('touchmove', function (e) {
if (firstMove) {
e.preventDefault();
firstMove = false;
}
});
The reason this works is that mobile Safari is using the first move to determine if body of the document is being scrolled. I have realised this while devising a more sophisticated solution.
这样做的原因是移动版 Safari 使用第一个动作来确定文档正文是否正在滚动。我在设计更复杂的解决方案时意识到了这一点。
In case this would ever stop working, the more sophisticated solution is to inspect the touchTargetelement and its parents and make a map of directions that can be scrolled to. Then use the first touchmoveevent to detect the scroll direction and see if it is going to scroll the document or the target element (or either of the target element parents):
万一这将停止工作，更复杂的解决方案是检查touchTarget元素及其父元素并制作可以滚动到的方向图。然后使用第一个touchmove事件来检测滚动方向，看看它是要滚动文档还是目标元素（或目标元素的父元素）：
var touchTarget,
touchScreenX,
touchScreenY,
conditionParentUntilTrue,
disableScroll,
scrollMap;
conditionParentUntilTrue = function (element, condition) {
var outcome;
if (element === document.body) {
return false;
}
outcome = condition(element);
if (outcome) {
return true;
} else {
return conditionParentUntilTrue(element.parentNode, condition);
}
};
window.addEventListener('touchstart', function (e) {
touchTarget = e.targetTouches[0].target;
// a boolean map indicating if the element (or either of element parents, excluding the document.body) can be scrolled to the X direction.
scrollMap = {}
scrollMap.left = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollLeft > 0;
});
scrollMap.top = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollTop > 0;
});
scrollMap.right = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollWidth > element.clientWidth &&
element.scrollWidth - element.clientWidth > element.scrollLeft;
});
scrollMap.bottom =conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollHeight > element.clientHeight &&
element.scrollHeight - element.clientHeight > element.scrollTop;
});
touchScreenX = e.targetTouches[0].screenX;
touchScreenY = e.targetTouches[0].screenY;
disableScroll = false;
});
window.addEventListener('touchmove', function (e) {
var moveScreenX,
moveScreenY;
if (disableScroll) {
e.preventDefault();
return;
}
moveScreenX = e.targetTouches[0].screenX;
moveScreenY = e.targetTouches[0].screenY;
if (
moveScreenX > touchScreenX && scrollMap.left ||
moveScreenY < touchScreenY && scrollMap.bottom ||
moveScreenX < touchScreenX && scrollMap.right ||
moveScreenY > touchScreenY && scrollMap.top
) {
// You are scrolling either the element or its parent.
// This will not affect document.body scroll.
} else {
// This will affect document.body scroll.
e.preventDefault();
disableScroll = true;
}
});
The reason this works is that mobile Safari is using the first touch move to determine if the document body is being scrolled or the element (or either of the target element parents) and sticks to this decision.
这样做的原因是移动版 Safari 使用第一次触摸移动来确定是否正在滚动文档正文或元素（或任一目标元素父元素）并坚持此决定。
回答by Rob Lauer
If you are using jquery 1.7+, this works well:
如果您使用的是 jquery 1.7+，这很有效：
$("donotscrollme").on("touchmove", false);
回答by kaleazy
This should work. No more gray areas at the top or bottom:)
这应该有效。顶部或底部不再有灰色区域:)
<script type="text/javascript">
function blockMove() {
event.preventDefault() ;
}
</script>
<body ontouchmove="blockMove()">
But this also disables any scrollable areas. If you want to keep your scrollable areas and still remove the rubber band effect at the top and bottom, see here: https://github.com/joelambert/ScrollFix.
但这也会禁用任何可滚动区域。如果您想保留可滚动区域并仍然删除顶部和底部的橡皮筋效果，请参阅此处：https: //github.com/joelambert/ScrollFix。
回答by Brynner Ferreira
Disable:
禁用：
document.ontouchstart = function(e){ e.preventDefault(); }
Enable:
使能够：
document.ontouchstart = function(e){ return true; }
回答by Freebie
The page has to be launched from the Home screen for the meta tag to work.
该页面必须从主屏幕启动，元标记才能工作。
回答by Josh Bedo
document.ontouchmove = function(e){
e.preventDefault();
}
is actually the best choice i found out it allows you to still be able to tap on input fields as well as drag things using jQuery UI draggable but it stops the page from scrolling.
实际上是我发现的最佳选择，它允许您仍然能够点击输入字段以及使用 jQuery UI draggable 拖动东西，但它会阻止页面滚动。
回答by TheeBen
I tried above answers and particularly Gajus's but none works. Finally I found the answer below to solve the problem such that only the main body doesn't scroll but other scrolling sections inside my web app all work fine. Simply set position fixed for your body:
我尝试了上述答案，尤其是 Gajus 的答案，但没有任何效果。最后我找到了下面的答案来解决这个问题，只有主体不滚动，但我的网络应用程序中的其他滚动部分都可以正常工作。只需为您的身体设置固定位置：
body {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
