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

我有一个网页，我想阻止页面滚动X.原因是我在页面的左侧和右侧有菜单设置，因此无法看到它们，并根据具体情况进行分析。单击了哪个按钮。 这在桌面上工作正常，当我在手机和平​​板电脑上测试时，我仍然可以滚动窗口X.这不好，因为它滚动显示隐藏的div。

我曾尝试使用CSS来防止这种情况，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：

 
 
page
 
 
 
 
 

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上，而是在不活动时将它们设置为隐藏，而不是将它们隐藏在屏幕之外，所以它们根本不属于文档流程的一部分？

---

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

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

HTML

 HIDE SIDE 
 SIDE BAR 
 
 MAIN CONTENT  

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”，页面都可以在任何溢出的轴上滚动或拖动。

我通过我正在处理的Web应用程序解决这个问题的方法是在内容下面实际拥有菜单堆栈，并将内容div设置为向左或向右动画。

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

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