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

浅浅的花香味﹌ 2022-06-04 05:11 291阅读 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 条评论，291人围观）

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

相关阅读

相关 css隐藏滚动条

> 有时候利用形成了滚动条后，我们要保留它的功能，且隐藏它的滚动条。 scrollbar-width: none;//火狐 -ms-overflow-

一时失言乱红尘/ 2023年07月03日 10:59/ 0 赞/ 29 阅读

相关隐藏div滚动条

溢出隐藏，写两个div，高度都固定，外面的固定宽度overflow: hidden;里面的div宽度比外面的稍宽，最好算好滚动条的宽度，[overflow-y][]: auto

刺骨的言语ヽ痛彻心扉/ 2023年06月19日 02:16/ 0 赞/ 19 阅读

相关如何隐藏overflow: scroll的滚动条，但是滚动功能还在(保留滚动功能)

1.这个适用于Chrome ::-webkit-scrollbar { /隐藏滚轮/ display: none; } 2.为了兼容其他浏

客官°小女子只卖身不卖艺/ 2023年02月28日 11:20/ 0 赞/ 1 阅读

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

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

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

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

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

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

相关滚动条的隐藏

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

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

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

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

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

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

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

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

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

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

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

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

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

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