介绍 .nav_wrap {
身高:400 px;
宽度:200 px;
溢出:隐藏;
边界:1 px固体# ccc;
保证金:20 px汽车;
}
.nav_ul {
高度:100%;
宽度:220 px;
overflow-y:汽车;
overflow-x:隐藏;
}
.nav_li {
边界:1 px固体# ccc;
保证金:1 px;
高度:40像素;
行高:40像素;
text-align:中心;
字体大小:12 px;
宽度:200 px;
}
.btn_wrap {
text-align:中心;
} & lt; div类=皀av_wrap"比;
& lt; ul类=皀av_ul"祝辞
& lt;李类=皀av_li"在我是菜单1 & lt;/li>
& lt;李类=皀av_li"在我是菜单2 & lt;/li>
& lt;/ul>
& lt;/div>
这篇文章将为大家详细讲解有关css + div隐藏滚动条的实现方法是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
当我们的内容超出了我们的div,往往会出现滚动条,影响美观。
尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。
<强>方法
这里介绍一个简单的方法。大体思路是在div外面再套一个div。这个div设置溢出:隐藏。
而内容div设置overflow-y:滚动;overflow-x:隐藏。
然后再设置外层div的宽度小于内层div的宽度。
这个内层div其实是会出现滚动条的,所以不影响鼠标的滚动效果,而且我们看不到滚动条了。
<>强效果
内层div效果:
套上外层div效果后:
<强>代码
css代码:
html代码:
之前的一个项目中的菜单用到了这个技巧。那个项目用了iframe。也是让滚动条被遮住了。
今天又顺手把目前在做的项目中的导航菜单的滚动条去掉了。简单总结下来
关于css + div隐藏滚动条的实现方法是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
