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

前记

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

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

方法

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

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

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

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

效果

内层div效果&＃xff1a;

套上外层div效果后&＃xff1a;

代码

css代码&＃xff1a;

.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代码&＃xff1a;