这是一个有趣的人！：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到您的身体中，并且应该在移动设备上进行缩放。我对此可能是错的（我没有一种简单的方法可以测试ATM），但是如果没有人可以纠正我，我会在可能的情况下再找您，并尽快回复您！
编辑：我的错误...您（很可能）也需要这个。
.sub {
width: 100%;
height: 100%;
}
这样，每个div（就像幻灯片中的幻灯片一样）将适合整个屏幕，但是由于overflow: hidden您的body和html标签，多余的“框架”将被隐藏。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句