Question

我有一个网页，我想阻止页面滚动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);
    }
}

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

Answer 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/

Answer 2

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

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

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

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

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

2 个答案: