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

浅浅的花香味﹌ 2022-06-04 05:11 240阅读 0赞

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

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

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

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

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

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

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>

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. \}

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关火狐浏览器隐藏滚动条，但是有滚动效果

　overflow-y: scroll; 　　scrollbar-color: transparent transparent; 　　scrollbar

以你之姓@/ 2022年11月17日 05:04/ 0 赞/ 137 阅读

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

当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容

浅浅的花香味﹌/ 2022年06月04日 05:11/ 0 赞/ 241 阅读

相关滚动条的隐藏

<template> <el-container> <div class="zhl-scroll-sider" :style="{heigh

逃离我推掉我的手/ 2022年05月25日 03:16/ 0 赞/ 251 阅读

相关 HTML - 隐藏滚动条但可以滚动

原理: （原理就是遮盖） 1、如果你把子div的140px宽度移除，你就明白其中的奥妙了。 2、原理就是父元素负责滚动，子元素负责遮盖。解释: 父类的div 负责滚

深碍√TFBOYSˉ_/ 2022年04月10日 01:23/ 0 赞/ 636 阅读

相关 iframe的滚动条问题：显示/隐藏滚动条

1. XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

冷不防/ 2022年02月15日 15:29/ 0 赞/ 380 阅读

相关不可思议的纯 CSS 滚动进度条效果

结论先行，如何使用 CSS 实现下述滚动条效果？ [![scrollbar][]][scrollbar 1] 就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。在

小咪咪/ 2022年01月30日 11:19/ 0 赞/ 229 阅读

相关 div超出部分滚动并且隐藏滚动条

想要实现的效果是：div具备滚动效果，但是外面看不到滚动条。需求：博客系统，由于发博客的人数较多，不能全部显示在页面上，所以需要滚动效果，但是界面上一般会安排一个div专门

缺乏、安全感/ 2021年12月19日 15:39/ 0 赞/ 396 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

1. 1. 主要代码：　　ul ::-webkit-scrollbar\{

Bertha 。/ 2021年10月23日 07:13/ 0 赞/ 426 阅读

相关 CSS 实现隐藏滚动条滚动

需求：当页面元素溢出的时候会产生滚动条，这个时候需要页面样式优化：CSS实现隐藏滚动条但是可以滚动。 css伪类元素控制 body::-webkit-s

╰半夏微凉°/ 2021年09月19日 01:36/ 0 赞/ 442 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

项目场景需求要在局部实现滚动，但是滚动出现了滚动条，一瞬间感觉整个页面都不好了，经过努力css成功实现滚动同时隐藏滚动条，废话不多说，直接上代码核心代码： :

╰+哭是因爲堅強的太久メ/ 2021年07月04日 21:32/ 0 赞/ 608 阅读