这是一个有趣的! :P 这个问题以前在这里被问过，但我找到的答案都不适合我。
我正在制作一个网络应用程序，我需要用户使用提供的按钮在 div 之间水平导航，并在桌面和触摸设备的所有浏览器上禁用手动水平滚动。我假设这需要 jQuery？ 奖励积分:此外，如果我可以禁用 android 缩放和一般垂直滚动，以便我的 y 滚动特定于 div，以确保 maindiv 保持在窗口顶部)，那将是一个巨大的奖励!
注意:该应用程序将像任何其他应用程序一样完成所有视觉缩放和导航工作，因此请不要代表最终用户可访问性提及它是不建议的:)另外，overflow-x:hidden;不适用于触摸设备。宽度:100%；肯定行不通，因为它用于使内容适合浏览器宽度，所以我猜 jQuery 是我的答案所在？？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<style type="text/css">
/*body {overflow-x: hidden;}*/
.maindiv {width:400%; position: relative;}
.sub {width:25%; float:left;}
.content {width:100%; background: yellow;}
.forward {width:20%; background:orange;}.forward:hover{cursor:pointer;}
.back {width:20%; background:pink;}.back:hover{cursor:pointer;}
</style>
</head>
<body>
<div class="maindiv">
<div class="sub">
<div class="content">Page 1</div>
<div class="forward">forward</div>
</div>
<div class="sub">
<div class="back">back</div>
<div class="content">Page 2</div>
<div class="forward">forward</div>
</div>
<div class="sub">
<div class="back">back</div>
<div class="content">Page 3</div>
<div class="forward">forward</div>
</div>
<div class="sub">
<div class="back">back</div>
<div class="content">Page 4</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".forward").click(function(){
$(".maindiv").animate({left:'-=100%'});});})
$(document).ready(function(){
$(".back").click(function(){
$(".maindiv").animate({left:'+=100%'});});})
</script>
</body>
</html>
最佳答案
使用 CSS 实际上非常简单!只需将其添加到您的样式表中:
html, body {
overflow: hidden;
}
此外(有人可能需要验证这一点)IIRC，您可以将 zoom: 1 添加到您的 body 中，这应该会处理您在移动设备上的缩放。我对此可能是错误的(我没有一种简单的方法可以在 ATM 上测试它)但如果没有人可以纠正我，我会尽可能地看看并回复你!</p>
编辑: 我的错误...您(很可能)也需要它。
.sub {
width: 100%;
height: 100%;
}
这样，每个 div(有点像幻灯片放映中的幻灯片)将适合整个屏幕，但额外的“框架”将被隐藏，这要归功于你 body 上的 overflow: hidden和 html 标签。
关于jquery - 如何在所有浏览器中完全禁用滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22651867/