搜索

首页  >  问答  >  正文

css - javascript 隐藏网页滚动条

在safari浏览器中,当滚动条至页面底部,点击文档,隐藏滚动条失效

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo3</title>
<meta name="description" content="描述">
<meta name="keywords" content="关键字">
<style type="text/css">
body,ul{
    margin:0;
    font:12px/1.5 arial,'\5b8b\4f53',sans-serif;
}
ul{
    padding:0;
    list-style:none;
}
.hide{
    overflow:hidden;
}
.wp{
    width:1000px;
    margin:0 auto;
    background:#7c1;
}
.wp li{
    width:300px;
    height:500px;
}
#box{   
    width:300px;
    height:300px;
    background:#fff;
    position:fixed;
    top:50%;
    left:50%;
    margin:-150px 0 0 -150px; 
}

#overlay{
    width:100%;
    height:100%;    
    background:#000;
    opacity:0.5;
    position:fixed;
    left:0;
    top:0;  
}
</style>


<script type="text/javascript">
    
window.onload = function(){  

    document.onclick = function(){
    
        document.body.className = 'hide';

    }

}
</script>


</head>
<body>
    <p class="wp">
        <ul>
            <li style="background:red"></li>
            <li style="background:green"></li>
            <li style="background:blue"></li>
            <li style="background:pink"></li>
            <li style="background:yellow"></li>
            <li style="background:#ccc"></li>
            <li style="background:#2079be"></li>
        </ul>
    </p>
</body>
</html>
巴扎黑巴扎黑2895 天前281

全部回复(2)我来回复

  • PHP中文网

    PHP中文网2017-04-10 15:26:30

    可以试试直接给body加overflow-y: none;

    回复
    0
  • 天蓬老师

    天蓬老师2017-04-10 15:26:30

    body {
        overflow-y: hidden;
    }
    

    回复
    0
  • 取消回复