css+div隐藏滚动条的实现方法是什么

这篇文章将为大家详细讲解有关css+div隐藏滚动条的实现方法是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：国际域名空间、网站空间、营销软件、网站建设、漳州网站维护、网站推广。

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

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

方法

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

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

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

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

效果

内层div效果：

css+div隐藏滚动条的实现方法是什么

套上外层div效果后：

css+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代码：

之前的一个项目中的菜单用到了这个技巧。那个项目用了iframe。也是让滚动条被遮住了。
今天又顺手把目前在做的项目中的导航菜单的滚动条去掉了。简单总结下来

关于css+div隐藏滚动条的实现方法是什么就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

文章名称：css+div隐藏滚动条的实现方法是什么
链接分享：http://ybzwz.com/article/gddgcp.html

css+div隐藏滚动条的实现方法是什么

其他资讯