Question

这是一个有趣的！：P这个问题之前已经在这里提出，但我找不到任何答案。

我正在制作一个网络应用程序，我需要用户使用提供的按钮在div之间水平导航，在桌面和触摸设备的所有浏览器上禁用手动水平滚动。我认为这需要jQuery？奖励积分：此外，如果我可以禁用Android缩放和一般垂直滚动，以便我的y滚动特定于div以确保maindiv停留在窗口的顶部）这将是一个巨大的奖金！

注意：该应用程序将像任何其他应用程序一样执行所有可视扩展和导航工作，因此请不要提及它代表最终用户可访问性而未经过修改:)此外，溢出-x：隐藏;不会为触摸设备工作。宽度：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>

Answer 1

使用CSS实际上非常简单！只需将其添加到样式表中即可：

html, body {
    overflow: hidden;
}

另外（有人可能需要验证这一点）IIRC，您可以将zoom: 1添加到您的身体，这应该照顾您在移动设备上的缩放。我可能错了（我没有一个简单的方法来测试ATM）但如果没有人可以纠正我，我会看看我什么时候可以回复你！</ p>

修改我的错误......你（很可能）也需要这个。

.sub { width: 100%; height: 100%; }

这样，每个div（有点像幻灯片中的幻灯片）都适合整个屏幕，但是额外的“框架”将被隐藏，这要归功于你身上的overflow: hidden和html标签。< / p>

Answer 2

设置溢出：隐藏;在身体标签上像这样：

<style type="text/css">
html,body {
overflow:hidden;
}
</style>

- ＆GT;上面的代码隐藏了水平和垂直滚动条。

- ＆gt;并且如果您只想隐藏垂直或水平滚动条尝试，

    overflow-x:hidden; //for horizontal scrollbar 
    overflow-y:hidden; // for Vertical scrollbar

如何在所有浏览器中完全禁用滚动？

2 个答案: