如何阻止页面滚动移动网站？答案

【问题标题】：How to stop page from scrolling for a mobile website?如何阻止页面滚动移动网站？
【发布时间】：2013-11-19 14:06:17
【问题描述】：

我有一个网页，我想阻止页面滚动 X。原因是我在页面的左侧和右侧设置了菜单，因此它们不能被看到，并且动画进出取决于单击哪个按钮。当我在手机和平板电脑上测试它时，这在桌面上运行良好，我仍然可以滚动窗口 X。这不好，因为它滚动显示隐藏的 div。

我已经尝试使用 CSS 来防止这种情况，它再次在桌面上工作，但我希望它在移动或平板设备上具有相同的效果。

CSS：

body{
    padding:0,0,0,0;
    overflow-x:hidden;
}
#nav{
    position:absolute;
    z-index:2;
    height:100%;
    width:300px;
    top:70px;
    left:-300px;
    background-color:#666;
    padding-top:10px;
    padding-bottom:10px;
    overflow:scoll;
    box-shadow: 5px 0px 5px #333;
}
#facebook{
    position:absolute;
    height:700px;
    width:320px;
    top:70px;
    left:100%;
    background-color:#666;
    z-index:2;
    padding-top:10px;
    padding-bottom:10px;
    box-shadow: -5px 0px 5px #333;
}

HTML：

<div id="page">
    <div id="content">page</div>
</div>
<div id="facebook"></div>
<div id="nav"></div>
<div id="footer"></div>

JavaScript：

var fb_visible = false;
function fb_toggle(){
    var fb_div = document.getElementById('facebook');
    var position = $("#facebook").position();
    var fb_width = $('#facebook').width();
    var newPos;
    if(fb_visible === false){
        fb_visible = true;
        newPos = parseInt(position.left) - fb_width; 
    }else{
        fb_visible = false;
        newPos = parseInt($(document).width());     
    }
    $('#facebook').animate({left:newPos+"px"},1000);
}
var nav_visible = false;
function nav_toggle(){
    var nav = document.getElementById('nav');
    var width = parseInt($('#nav').width());
    if(nav_visible === false){
        nav_visible = true;
        $('#nav').animate({left:"0px"},1000);
    }else{
        nav_visible = false;
        $('#nav').animate({left:"-"+width+"px"},1000);
    }
}

有没有办法为移动设备重新创建这个？

【问题讨论】：

CSS position:fixed 现在支持 iOS 和当前版本的 Android。
CSS：位置：固定；没有帮助，它会停止在我的设备上加载页面，并且在桌面上无法正常工作。
overflow:hidden怎么样
不适用于桌面但不适用于 android/ios 设备，我也尝试过：document.ontouchmove = function(e){ if(disableScroll){ e.preventDefault();这很好用，但它也完全禁用了触摸，所以我的链接不起作用。它有可能只控制到 x-scroll

标签： javascript android jquery html css

【解决方案1】：

除了将它们隐藏在屏幕之外，您是否考虑过将它们全部放在同一个 z-index 上，并在不活动时将它们设置为隐藏，这样它们根本就不是文档流的一部分？

我从头开始做了一个简单的例子来演示这个想法。

当侧边菜单被隐藏时，它不是页面的一部分，所以浏览器应该只显示主 div。

HTML

<a href="#" class="SideHide" title="Show/Hide Sidebar">HIDE SIDE</a>

<div class="Nav">
 SIDE BAR
</div>

<div class="Wrap">
 MAIN CONTENT
</div>

CSS

.Nav{
    background:#ccc;
    position:fixed;
    height:100%;
    width:200px;
}
.Wrap{
    background:#cdf;
    margin-left:200px;
    min-height:250px;
}

JAVASCRIPT

var flag = 0;
$('.SideHide').click(function() {
    if (flag == 0) {
        $('.Nav').fadeOut({complete: function(){
            $('.Wrap').animate({marginLeft: 0});
        }});
        flag = 1
    }
    else if (flag == 1) {
        $('.Wrap').animate({marginLeft: 200},{complete: function(){
            $('.Nav').fadeIn();
        }});
        flag = 0
    }
});

http://jsfiddle.net/r3x25/

【讨论】：

效果很好，在屏幕上也有同样的效果。从双方。

【解决方案2】：

根据我测试移动设备的经验，如果元素比视口宽 1 像素，那么无论是否设置了“overflow:hidden”，页面都可以在任何溢出的轴上滚动或拖动。

我用我正在开发的网络应用程序解决这个问题的方法是将菜单堆栈实际放在内容下方，并将内容 div 向左或向右设置动画。

有关使用此方法的另一个项目的示例，请参阅：Github: Snap

我也尝试过 iScroll，但我的项目要求使其过于复杂。不过它可能对你有用。它完全取代了原生滚动。 cubiq: iScroll 4

【讨论】：

这看起来应该更有可能