怎么隐藏滚动条又能滚动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>滚动条隐藏</title>
 6     <style>
 7         body, ul, li { 8             margin: 0;
 9             padding: 0;
10         }
11
12         body, html {13             height: 100%;
14         }
15
16         .outer {17             position:fixed;
18             top:0;
19             /*外层div宽度比里层小*/
20             width: 100px;
21             /*外层div超出隐藏*/
22             overflow: hidden;
23             bottom:0;
24         }
25
26         .inner {27             background: #2d4658;
28             /*里层div宽度比外层大，当外层div多出里层一定的宽度时就能隐藏滚动条*/
29             width: 120px;
30             height: 100%;
31             /*里层滚动属性*/
32             overflow-x:hidden;
33             overflow-y: auto;
34         }
35
36         .inner ul li {37             color: #fff;
38             padding: 30px 10px;
39         }
40     </style>
41 </head>
42 <body>
43 <div class="outer">
44     <div class="inner">
45         <ul>
46             <li>item</li>
47             <li>item</li>
48             <li>item</li>
49             <li>item</li>
50             <li>item</li>
51             <li>item</li>
52             <li>item</li>
53             <li>item</li>
54             <li>item</li>
55             <li>item</li>
56             <li>item</li>
57             <li>item</li>
58             <li>item</li>
59             <li>item</li>
60             <li>item</li>
61         </ul>
62     </div>
63 </div>
64 </body>
65 </html>

效果如下：

更多专业前端知识，请上【猿2048】www.mk2048.com

怎么隐藏滚动条又能滚动相关推荐

css 隐藏滚动条竖向y滚动，横向x不滚动
.bottom {overflow-x: hidden;overflow-y: scroll; } 参考博客: 3种方法实现CSS隐藏滚动条并可以滚动内容
CSS隐藏滚动条，保留滚动功能
CSS隐藏滚动条,保留滚动功能原理:设置父级为溢出隐藏,而子级不进行溢出隐藏设置同时改变子级的宽度使进度条溢出到父级外面. 设置父级overflow:hidden;是为了使父级溢出隐藏.再设置子级的 ...
CSS实现隐藏滚动条并可以滚动内容效果(三种方式)
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
CSS实现隐藏滚动条但可以滚动
今天记录一个很小的问题,在工作之中会经常遇到的,当页面元素溢出的时候会产生滚动条,这个时候需要页面样式优化:CSS实现隐藏滚动条但是可以滚动. 通过设置高和voerflow,实现滚动条效果: . pa ...
【前端大概一分钟】css隐藏滚动条同时可以滚动
1. 通过 ::-webkit-scrollbar 伪元素 .inner-container::-webkit-scrollbar {display: none; } 复制代码简单粗暴,但是兼容性不 ...
CSS隐藏滚动条并可以滚动内容
隐藏滚动条常用方法 .container::-webkit-scrollbar {display:none} 为了兼容其他的浏览器,可以用这样的方法: 在滚动区域外再套一层div,给这层div设置ov ...
隐藏滚动条css3实现滚动同时隐藏滚动条
项目场景需求要在局部实现滚动,但是滚动出现了滚动条,一瞬间感觉整个页面都不好了,经过努力css成功实现滚动同时隐藏滚动条,废话不多说,直接上代码核心代码: ::-webkit-scrollbar{d ...
CSS实现隐藏滚动条并保留滚动功能
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...

怎么隐藏滚动条又能滚动

怎么隐藏滚动条又能滚动相关推荐

最新文章

热门文章