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