[英]Disable Horizontal Scrolling on Mobile Webpage
我有一个要构建的简单移动网页,带有一个类似Facebook的侧面菜单按钮。 我正在尝试使用CSS overflow-x:hidden禁用水平滚动,但是它不起作用。 这是我的代码,任何帮助将不胜感激:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var win = $("#right-side");
var position = win.position();
//alert( "left: " + position.left + ", top: " + position.top );
if(position.left < 100)
{
$("#right-side").animate({left:'250px'});
}else{
$("#right-side").animate({left:'0px'});
}
});
});
</script>
<style>
body{overflow-x: hidden;font-family: sans-serif;}
#right-side{
background:#BFC7D8;;
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
#left-menu
{
background:#323949;
left:0;
top:0;
height:100%;
width:250px;
position:absolute;
}
#navigation { font-size:20px; width:250px; padding-top:100px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style: none; }
ul.top-level li > a {
display: block;
border-bottom: 1px solid rgba(0,0,0, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 15px;
text-shadow: 0 1px 0 #000;
text-decoration: none;
color: #ccc;
text-indent: 20px;
}
#toolbar
{
width:100%;
height:50px;
background:#00F;
}
</style>
<div id="left-menu">
<div id="navigation">
<ul class="top-level">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
</div>
<div id="right-side">
<div id="toolbar">
<button>Menu</button>
</div>
<h1>This is a test</h1>
</div>
我已经把您的代码摆弄得很乱,但是我无法在头部添加'zoom'元标记,因此很难在手机上进行测试。 http://jsfiddle.net/Pevara/Ku5nY/1/show/
似乎可以在桌面上正常工作,但没有滚动条。
我确实将以下内容添加到您的CSS中:
body{
overflow-x:hidden;
font-family: sans-serif;
/* added: */
max-width: 100%;
height: 100%;
}
不确定是否会有所作为,但值得一试...
大卫。
您是否尝试过使用此工具: http : //mmenu.frebsite.nl/
另外,看看这个,看看是否可以使用它来调整您的代码:
您会注意到有3个功能:
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
left: 0
}, 'slow', function () {
$('#trigger span').html('Close'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
left: -40
}, 'slow', function () {
$('#trigger span').html('Show'); //change the trigger text at end of animation
});
}
我遇到了类似的问题,即我的内容后面有菜单,并向左推动我的内容以显示隐藏在其后的Facebook样式菜单。
我采用“绝对”定位来模拟幻灯片,并将内容从文档流中取出。 隐藏溢出的情况下,您似乎可以触摸内容层了(这听起来与您遇到的问题相同)。 即使在标准溢出的情况下,x和y仍设置在几乎所有情况下。 这也是宽度:在身体上的100%等。
当我将内容层滑过时,将内容层更改为“相对”,然后将内容的高度(在打开菜单时)减小到窗口高度似乎对我来说很有效,并且在设备上似乎相当健壮。
祝您好运,这对遇到类似问题的任何人都应该有所帮助。
谢谢戴夫
快来 问题是,只有定义模态的高度,它才有效。 如果没有定义高度,它将无法正常工作。 将对话框设置为高度100%,并隐藏溢出。 然后将内容设置为position:absolute,top:0,bottom:0,left:0,right:0,margin:auto并定义高度(在下面的示例中,登录模式为250px)。 我知道这听起来很不合理-可能是CSS故障,但是:可以-跨浏览器和跨平台(尚未检查iPhone)。
<div class="modal-dialog" style="height:100%;overflow:hidden"><div class="modal-content" style="position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;height:250px;">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.