怎么隐藏滚动条又能滚动
生活随笔
收集整理的這篇文章主要介紹了
怎么隐藏滚动条又能滚动
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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>
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
效果如下：
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的怎么隐藏滚动条又能滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
