如何从滚动的移动网站停止页面？ [英] How to stop page from scrolling for a mobile website?

问题描述

我有一个网页，欲从被滚动X的原因是我在左边和被设置为使得它们不能被看到的页面的右边，菜单停止页并animted或缩小取决于该按钮被点击。
这工作得很好，当我测试我的手机和平板电脑上我仍然可以滚动窗口X.这是不好的，因为它一起滚动，以显示隐藏的分区在桌面上。

I have a web page that I want to stop the page from being scrolled X. The reason is I have menus on the left and right of the page which are set so they can't be seen, and animted in or out depending on the which button is clicked. This works fine on a desktop when when I test it on my phone and tablet I can still scroll the window X. Which isn't good as it scrolls along to show the hidden div.

我曾尝试prevented这个使用CSS，这再次工作的桌面上，但我希望它有一个手机或平板电脑上相同的效果。

I have tried prevented this using CSS, which again works on a desktop but I want it to have the same effect on a mobile or tablet device.

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的：

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);
    }
}

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

Is there a way to recreate this for mobile devices?

推荐答案

而不是隐藏它们关闭屏幕的你有没有考虑让他们都在同一z索引，并将其设置为隐藏时不活跃，使他们不属于部分在所有的公文流转？

Instead of hiding them off screen have you considered having them all on the same z-index and setting them to hidden when not active so they are not part of the document flow at all?

我已经做了一个简单的例子从头开始只是为了验证这个想法。

I have done a quick example from scratch just to demonstrate the idea.

在侧面菜单隐藏它不是页面的一部分，所以浏览器应该只显示主分区。

When the side menu is hidden it is not part of the page so browser should show only the main 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/

这篇关于如何从滚动的移动网站停止页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！