纯css+div隐藏滚动条的实现方法（代码示例）

当我们的内容超出了我们的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>

以上就是纯css+div隐藏滚动条的实现方法（代码示例）的详细内容，更多内容请关注技术你好其它相关文章！