我怀疑大多数人真的想禁用缩放/滚动,以提供更像应用程序的体验;因为答案似乎包含缩放和滚动解决方案的元素,但没有人真正确定其中任何一个。
滚动
要回答 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();
}
在您的样式表中,确保您的body
和html
标签包括以下内容:
html:
{
overflow: hidden;
}
body
{
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
}
缩放
但是,滚动是一回事,但您可能还想禁用缩放。您对标记中的元标记执行的操作:
<meta name="viewport" content="user-scalable=no" />
所有这些放在一起为您提供类似应用程序的体验,可能最适合画布。
(如果您使用画布,请注意某些人的建议,即在元标记中添加initial-scale
和之类的属性,因为与块元素不同,画布会缩放其内容,并且您通常会得到一个丑陋的画布)。width