日期:2014-05-16  浏览次数:20385 次

FF下,方向键可以使body滚动的问题
FF下给body标签加overflow:hidden后,仍可以使用键盘方向键滚动body(body中内容高宽大于body),有什么属性可以直接设置不让body滚动吗?代码如下:

JScript code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style='overflow:hidden'>
<div style='width:900px;height:1200px;background-color:#555555;position:absolute'>
<span style='left:100px;top:100px;width:100px;height:100px;foreground-color:#DDDDDD;position:absolute'>hello</span>
</div>
</body>
</html>


------解决方案--------------------
你可以这么做,但是你用鼠标选择的时候还是可以下去的,IE,chrome,ff都是
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style='overflow:hidden'>
<div style='width:900px;height:1200px;background-color:#555555;position:absolute'>
<span style='left:100px;top:100px;width:100px;height:100px;foreground-color:#DDDDDD;position:absolute'>hello</span>
</div>
</body>
<script>
document.onkeypress = function(event){
    if(37<=event.keyCode<=40){
        event.preventDefault();
    }
}
</script>
</html>

------解决方案--------------------
HTML code
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
</head>
<body>
    <div id="container">
        <div style='width:900px;height:1200px;background-color:#555555;'>
            <span style='left:100px;top:100px;width:100px;height:100px;foreground-color:#DDDDDD;'>hello</span>
        </div>
    </div>
    <script>
        window.onload = function(){
            var div = document.getElementById('container');
            div.style.height = document.documentElement.clientHeight - 16 + "px";
            div.style.overflow = "hidden";
        }
    </script>
</body>
</html>