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

cooxer 发布于2019-08-02 12:00 / 3231人阅读

摘要：滚动条一出现就破坏了效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。这个内层其实是会出现滚动条的，所以不影响鼠标的滚动效果，而且我们看不到滚动条了。也是让滚动条被遮住了。

前记

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

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

演示

演示：http://runningls.com/demos/20...

转载于：https://blog.csdn.net/liusain...
作者：liusaint1992

GPU云服务器云服务器 css滚动条滚动条css html 滚动条 css 鼠标滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53266.html

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

摘要：滚动条一出现就破坏了效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。这个内层其实是会出现滚动条的，所以不影响鼠标的滚动效果，而且我们看不到滚动条了。也是让滚动条被遮住了。前记当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，...

jemygraw 2019-08-29 17:15 评论0 收藏0
移动端

摘要：纯，隐藏滚动条，保留鼠标滚动效果。中弹性拉伸的现象解决禁用那个层或者的事件的默认行为禁用音视频自动播放这个是苹果官方明确提出的，为了用户的利益。所以的浏览器依然是死角，不能做到自动播放。只是一个文档总结，纯粹是喜欢SF的Markdown。 HTML CSS X轴上采用百分比字体大小以及部分不能用百分比衡量者，采用REM单位 JS 配置页面根font-size大小 (f...

lowett 2019-08-20 18:21 评论0 收藏0
移动端

摘要：纯，隐藏滚动条，保留鼠标滚动效果。中弹性拉伸的现象解决禁用那个层或者的事件的默认行为禁用音视频自动播放这个是苹果官方明确提出的，为了用户的利益。所以的浏览器依然是死角，不能做到自动播放。只是一个文档总结，纯粹是喜欢SF的Markdown。 HTML CSS X轴上采用百分比字体大小以及部分不能用百分比衡量者，采用REM单位 JS 配置页面根font-size大小 (f...

chaosx110 2019-08-29 13:00 评论0 收藏0
使用CSS实现无滚动条滚动

摘要：滚动条一出现就破坏了效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。而内容设置然后再设置外层的小于内容的，就是用一个无滚动条的包裹另一个有滚动条的，从而实现隐藏滚动条的效果。我们都知道，撸页面的时候当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出...

gself 2019-04-23 13:24 评论0 收藏0