Android 在所有移动设备中禁用滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10592411/
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 all mobile devices
提问by Sammy
This sounds like there should be a solution for it all over the internet, but I am not sure why I cannot find it. I want to disable Horizontal scrolling on mobile devices. Basically trying to achieve this:
这听起来应该在整个互联网上都有解决方案，但我不确定为什么我找不到它。我想在移动设备上禁用水平滚动。基本上试图实现这一目标：
body{
overflow-x:hidden // disable horizontal scrolling.
}
This may be relevant information: I also have this in my head tag, because I also do not wish the user to be able to zoom:
这可能是相关信息：我的头部标签中也有这个，因为我也不希望用户能够缩放：
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
Thanks
谢谢
回答by zeek
html, body {
overflow-x: hidden;
}
body {
position: relative;
}
The position relative is important, and i just stumbled about it. Could not make it work without it.
相对位置很重要，我只是偶然发现了它。没有它就无法工作。
回答by Chango
cgvector answer didn't work for me, but this did:
cgvector 答案对我不起作用，但这样做了：
document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });
I wouldn't leave it just like that, a smarter logic is needed to select when to prevent the scrolling, but this is a good start.
我不会就这样离开它，需要一个更聪明的逻辑来选择何时阻止滚动，但这是一个好的开始。
Taken from here: Disable scrolling in an iPhone web application?
取自此处： 禁用 iPhone Web 应用程序中的滚动？
回答by Tobl
For future generations:
为后代：
To prevent scrolling but keep the contextmenu, try
要防止滚动但保留上下文菜单，请尝试
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
It still prevents way more than some might like, but for most browsers the only default behaviour prevented should be scrolling.
它仍然阻止了一些人可能喜欢的方式，但对于大多数浏览器，唯一阻止的默认行为应该是滚动。
For a more sophisticated solution that allows for scrollable elements within the nonscrollable body and prevents rubberband, have a look at my answer over here:
对于允许在不可滚动主体中使用可滚动元素并防止橡皮筋的更复杂的解决方案，请在此处查看我的答案：
回答by Knetic
I suspect most everyone really wants to disable zoom/scroll in order to put together a more app-like experience; because the answers seem to contain elements of solutions for both zooming and scrolling, but nobody's really nailed either one down.
我怀疑大多数人真的想禁用缩放/滚动，以便组合更像应用程序的体验；因为答案似乎包含缩放和滚动解决方案的元素，但没有人真正确定其中任何一个。
Scrolling
滚动
To answer OP, the only thing you seem to need to do to disable scrolling is intercept the window's scrolland touchmoveevents and call preventDefaultand stopPropagationon the events they generate; like so
要回答OP，你似乎需要做的禁用滚动的唯一事情就是拦截窗口scroll和touchmove事件，并呼吁preventDefault和stopPropagation他们产生的事件; 像这样
window.addEventListener("scroll", preventMotion, false);
window.addEventListener("touchmove", preventMotion, false);
function preventMotion(event)
{
window.scrollTo(0, 0);
event.preventDefault();
event.stopPropagation();
}
And in your stylesheet, make sure your bodyand htmltags include the following:
在您的样式表中，确保您的body和html标签包含以下内容：
html:
{
overflow: hidden;
}
body
{
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
}
Zooming
缩放
However, scrolling is one thing, but you probably want to disable zoom as well. Which you do with the meta tag in your markup:
但是，滚动是一回事，但您可能还想禁用缩放。您对标记中的元标记执行的操作：
<meta name="viewport" content="user-scalable=no" />
All of these put together give you an app-like experience, probably a best fit for canvas.
所有这些组合在一起为您提供类似应用程序的体验，可能最适合画布。
(Be wary of the advice of some to add attributes like initial-scaleand widthto the meta tag if you're using a canvas, because canvasses scaletheir contents, unlike block elements, and you'll wind up with an ugly canvas, more often than not).
（如果您使用画布，请注意某些人的建议，即在元标记中添加类似initial-scale和 的属性width，因为画布会缩放其内容，这与块元素不同，并且您最终会得到一个丑陋的画布，通常情况下）。
回答by James Duffy
Try adding
尝试添加
html {
overflow-x: hidden;
}
as well as
也
body {
overflow-x: hidden;
}
回答by cgvector
use this in style
用这个风格
body
{
overflow:hidden;
width:100%;
}
Use this in head tag
在 head 标签中使用它
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
回答by Downhillski
In page header, add
在页眉中添加
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-sacle=1, maximum-scale=1, user-scalable=no">
In page stylesheet, add
在页面样式表中，添加
html, body {
overflow-x: hidden;
overflow-y: hidden;
}
It is both html and body!
它既是 html 又是正文！
回答by bernard
This works for me:
这对我有用：
window.addEventListener("touchstart", function(event){
if(event.target.tagName=="HTML" || event.target.tagName=="BODY"){
event.preventDefault();
}
} ,false);
It does not work 100% and I also added this:
它不能 100% 工作，我还添加了以下内容：
window.addEventListener("scroll",function(){
window.scrollTo(0,0)
},false)
回答by sirbrialliance
The CSS property touch-actionmay get you what you are looking for, though it may not workin all your target browsers.
CSS 属性touch-action可能会得到您想要的东西，尽管它可能不适用于您的所有目标浏览器。
html, body {
width: 100%; height: 100%;
overflow: hidden;
touch-action: none;
}
回答by Hike Nalbandyan
This prevents scrolling on mobile devices but not the single click/tap.
这可以防止在移动设备上滚动，但不能防止单击/点击。
document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });
