css div隐藏滚动条，保留鼠标滚动效果。

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

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

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

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

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

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

内层div效果：

套上外层div效果后：

css代码：

1.  .nav_wrap{
2.  height: 400px;
3.  width: 200px;
4.  overflow: hidden;
5.  border: 1px solid #ccc;
6.  margin: 20px auto;
7.  }
8.  .nav_ul{
9.  height: 100%;
10.  width: 220px;
11.  overflow-y: auto;
12.  overflow-x: hidden;
13.  }
14.  .nav_li{
15.  border: 1px solid #ccc;
16.  margin: -1px;
17.  height: 40px;
18.  line-height: 40px;
19.  text-align: center;
20.  font-size: 12px;
21.  width: 200px;
22.  }
23.  .btn_wrap{
24.  text-align: center;
25.  }

html代码：

1.  <div class= "nav_wrap">
2.  <ul class= "nav_ul">
3.  <li class="nav_li">我是菜单1</li>
4.  <li class="nav_li">我是菜单2</li>
5.  </ul>
6.  </div>

之前的一个项目中的菜单用到了这个技巧。那个项目用了iframe。也是让滚动条被遮住了。

今天又顺手把目前在做的项目中的导航菜单的滚动条去掉了。简单总结下来。

演示：http://runningls.com/demos/2016/css/scroll.html

css div隐藏滚动条，保留鼠标滚动效果。相关推荐

纯css解决div隐藏浏览器原生滚动条，但保留鼠标滚动效果的问题
纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题参考文章: (1)纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题 (2)https://www.cnblogs.co ...
CSS实现隐藏滚动条但可以滚动
今天记录一个很小的问题,在工作之中会经常遇到的,当页面元素溢出的时候会产生滚动条,这个时候需要页面样式优化:CSS实现隐藏滚动条但是可以滚动. 通过设置高和voerflow,实现滚动条效果: . pa ...
纯css，div隐藏滚动条，保留鼠标滚动效果。
当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的 ...
纯css，div隐藏滚动条，保留鼠标滚动效果
一.使用场景当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保 ...
隐藏滚动条，保留鼠标滚动效果
原作者地址:https://blog.csdn.net/liusaint1992/article/details/51277751 当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是 ...
CSS实现隐藏滚动条并可以滚动内容效果(三种方式)
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
CSS实现隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
CSS div隐藏滚动条
隐藏指定 div 或者滚动标签里面的滚动条. <!DOCTYPE html> <html lang="en"> <head><meta ...
CSS实现隐藏滚动条但是可以滚动
代码 body::-webkit-scrollbar {display: none; } 示例 css选择器::-webkit-scrollbar {display: none; }

css div隐藏滚动条，保留鼠标滚动效果。

css div隐藏滚动条，保留鼠标滚动效果。相关推荐

最新文章

热门文章