css隐藏滚动条代码实例
分类:实例代码
在默认情况下,如果元素的尺寸超出父元素的尺寸会出现滚动条。
不过有时候感觉滚动条的出现不够美观,下面分享一段代码实例,它可以实现隐藏滚动条的功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; background: #DADADA; } .box{ width: 200px; height: 100%; background: #FFFFFF; overflow: hidden; } .nav{ width: 110%; height: 100%; background: #266FB7; overflow: hidden; overflow-y: scroll; } .menus{ width: 200px; height: 120%; background: #000000; } b{color: white;} </style> </head> <body> <div class="box"> <div class="nav"> <div class="menus"> <b>前端教程网</b> </div> </div> </div> </body> </html>
上面的代码实现了我们的要求,下面简单介绍一下它的实现过程。
.box{ width: 200px; height: 100%; background: #FFFFFF; overflow: hidden; }
上面代码的关键是overflow: hidden,超出它的区域都会被隐藏。
.nav{ width: 110%; height: 100%; background: #266FB7; overflow: hidden; overflow-y: scroll; } .menus{ width: 200px; height: 120%; background: #000000; }
.nav类中,width值是110%,.menus类中height值是120%,那么默认状态下.nav元素会出现垂直滚动条。
但是由于nav的宽度超过了.box的宽度,超出的部分签好是滚动条的显示位置,但是被隐藏了,于是我们的要求就实现了。
css隐藏滚动条代码实例,这样的场景在实际项目中还是用的比较多的,关于css隐藏滚动条代码实例就介绍到这了。
css隐藏滚动条代码实例属于前端实例代码,有关更多实例代码大家可以查看。