纯css，div隐藏滚动条，保留鼠标滚动效果。

示例1：

html,body {
    height: 100%;
}
body {
    overflow: hidden;
}
.full-screen {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1000px;
}
.full-screen .header {
    position: absolute;
    /*width: 100%;*/
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
}
.full-screen .footer {
    position: absolute;
    /*width: 100%;*/
    height: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}
.full-screen .main {
    position: absolute;
    /*width: 100%;*/
    height: auto;
    overflow-y: scroll;
    left: 0;
    right: -17px;
    top: 50px;
    bottom: 50px;
    z-index: 0;
}

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./css/fullscreen.css">
</head>
<body>
    <div class="full-screen">
        <div class="header" style="background-color: black;"></div>
        <div class="main" style="background-color: yellow;">
            <div style="min-height: 500px;">
                <ol>
                    <li>001</li>
                    <li>002</li>
                    <li>003</li>
                    <li>004</li>
                    <li>005</li>
                    <li>006</li>
                    <li>007</li>
                    <li>008</li>
                    <li>009</li>
                    <li>010</li>
                    <li>011</li>
                    <li>012</li>
                    <li>013</li>
                    <li>014</li>
                    <li>015</li>
                    <li>016</li>
                    <li>017</li>
                    <li>018</li>
                    <li>019</li>
                    <li>020</li>
                    <li>021</li>
                    <li>022</li>
                    <li>023</li>
                    <li>024</li>
                    <li>025</li>
                    <li>026</li>
                    <li>027</li>
                    <li>028</li>
                    <li>029</li>
                    <li>030</li>
                    <li>031</li>
                    <li>032</li>
                    <li>033</li>
                    <li>034</li>
                    <li>035</li>
                    <li>036</li>
                    <li>037</li>
                    <li>038</li>
                    <li>039</li>
                    <li>040</li>
                    <li>041</li>
                    <li>042</li>
                    <li>043</li>
                    <li>044</li>
                    <li>045</li>
                    <li>046</li>
                    <li>047</li>
                    <li>048</li>
                    <li>049</li>
                    <li>050</li>
                    <li>051</li>
                    <li>052</li>
                    <li>053</li>
                    <li>054</li>
                    <li>055</li>
                    <li>056</li>
                    <li>057</li>
                    <li>058</li>
                    <li>059</li>
                    <li>060</li>
                    <li>061</li>
                    <li>062</li>
                    <li>063</li>
                    <li>064</li>
                    <li>065</li>
                    <li>066</li>
                    <li>067</li>
                    <li>068</li>
                    <li>069</li>
                    <li>070</li>
                    <li>071</li>
                    <li>072</li>
                    <li>073</li>
                    <li>074</li>
                    <li>075</li>
                    <li>076</li>
                    <li>077</li>
                    <li>078</li>
                    <li>079</li>
                    <li>080</li>
                    <li>081</li>
                    <li>082</li>
                    <li>083</li>
                    <li>084</li>
                    <li>085</li>
                    <li>086</li>
                    <li>087</li>
                    <li>088</li>
                    <li>089</li>
                    <li>090</li>
                    <li>091</li>
                    <li>092</li>
                    <li>093</li>
                    <li>094</li>
                    <li>095</li>
                    <li>096</li>
                    <li>097</li>
                    <li>098</li>
                    <li>099</li>
                    <li>100</li>
                </ol>
            </div>
        </div>
        <div class="footer" style="background-color: red;"></div>
    </div>
</body>
</html>

示例2：

当我们的内容超出了我们的div，往往会出现滚动条，影响美观。

尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。

这里介绍一个简单的方法。大体思路是在div外面再套一个div。这个div设置overflow:hidden。

而内容div设置 overflow-y: scroll;overflow-x: hidden;

然后再设置外层div的width小于内层div的width。

这个内层div其实是会出现滚动条的，所以不影响鼠标的滚动效果，而且我们看不到滚动条了。

内层div效果：

套上外层div效果后：

css代码：

.nav_wrap{  
    height: 400px;  
    width: 200px;  
    overflow: hidden;  
    border: 1px solid #ccc;  
    margin: 20px auto;  
}  
.nav_ul{  
    height: 100%;  
    width: 220px;  
    overflow-y: auto;  
    overflow-x: hidden;  
}  
.nav_li{  
    border: 1px solid #ccc;  
    margin: -1px;  
    height: 40px;  
    line-height: 40px;  
    text-align: center;  
    font-size: 12px;  
    width: 200px;  
}  
.btn_wrap{  
    text-align: center;  
}

html代码：

<div class= "nav_wrap">  
    <ul class= "nav_ul">        
        <li class="nav_li">我是菜单1</li>  
        <li class="nav_li">我是菜单2</li>  
    </ul>  
</div>

之前的一个项目中的菜单用到了这个技巧。那个项目用了iframe。也是让滚动条被遮住了。

posted @ 2017-01-18 10:44 jiangxiaobo 阅读(2034) 评论(0) 编辑收藏举报

刷新页面返回顶部

纯css，div隐藏滚动条，保留鼠标滚动效果。

公告