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隐藏滚动条代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容