纯css,div隐藏滚动条,保留鼠标滚动效果。
2017-01-18 10:44
876 查看
示例1:
示例2:
当我们的内容超出了我们的div,往往会出现滚动条,影响美观。
尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。
这里介绍一个简单的方法。 大体思路是在div外面再套一个div。这个div设置overflow:hidden。
而内容div设置 overflow-y: scroll;overflow-x: hidden;
然后再设置外层div的width小于内层div的width。
这个内层div其实是会出现滚动条的,所以不影响鼠标的滚动效果,而且我们看不到滚动条了。
内层div效果:
套上外层div效果后:
css代码:
html代码:
之前的一个项目中的菜单用到了这个技巧。那个项目用了iframe。 也是让滚动条被遮住了。
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。 也是让滚动条被遮住了。
相关文章推荐
- 纯css,div隐藏滚动条,保留鼠标滚动效果。
- 用原生css使div隐藏滚动条,保留鼠标滚动效果。
- 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题
- 纯css,div隐藏滚动条,保留鼠标滚动效果。
- 纯css,div隐藏滚动条,保留鼠标滚动效果。
- 纯css,div隐藏滚动条,保留鼠标滚动效果。
- 隐藏滚动条、保留鼠标滚动效果
- div隐藏滚动条仍保留滚动效果,兼容IE,FF,Webkit 和 O
- MFC CListCtrl控件隐藏滚动条但是保留用鼠标滚轮滚动效果的方法
- CSS滚动效果隐藏滚动条
- 用css实现如何使滚动条隐藏但是溢出时有滚动的效果
- css效果,在一个盒子里,把一部分内容隐藏掉,在鼠标悬停到div时,就会把隐藏的部分向上显示出来。 不用js操作,纯css就可以。
- 纯CSS实现隐藏滚动条但仍具有滚动的效果
- css如何实现滚动条隐藏但鼠标仍然可以滚动
- CSS实现DIV感应鼠标Hover时的显示隐藏效果
- vue.js-div滚动条隐藏但有滚动效果的实现方法
- vue.js-div滚动条隐藏但有滚动效果的实现
- div不显示滚动条但实现鼠标移上去可以上下滚动的效果
- jQuery实现鼠标点击div外的地方div隐藏消失的效果
- 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示