很多时候为了页面的美观，不免要自定义滚动条
隐藏滚动条但页面正常滚动的样式 ::-webkit-scrollbar {display:none}
正常滚动条样式
更改后滚动条样式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .outer{ 8 width: 300px; 9 height: 300px; 10 overflow: auto; 14 } 15 .inner{ 16 width: 400px; 17 height: 350px; 18 background: #ece6ae; 19 } 20 .outer::-webkit-scrollbar { 21 width: 6px;/*垂直滚动条*/ 22 height: 12px;/*对水平流动条有效*/ 23 } 24 /*定义滑块颜色、内阴影及圆角*/ 25 .outer::-webkit-scrollbar-thumb{ 26 border-radius: 10px; 27 background-color: #666; 28 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%,
rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); 29 } 30 /*定义滚动槽 颜色、内阴影及圆角*/ 31 .outer::-webkit-scrollbar-track{ 32 -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); 33 background: #ddd; 34 } 35 /*定义两端按钮的样式 */ 36 .outer::-webkit-scrollbar-button { 37 background-color:#333; 38 } 39 40 /*定义右下角汇合处的样式*/ 41 .outer::-webkit-scrollbar-corner { 42 background:#997890; 43 } 44 /*鼠标悬浮在滑块上时滑块的样式*/ 45 .outer::-webkit-scrollbar-thumb:hover{ 46 background-color:rgba(0,0,0,.4); 47 -webkit-box-shadow:inset 1px 1px 0rgba(0,0,0,.1); 48 } 49 /*鼠标悬浮在该类指向的控件上时滑块的样式*/ 50 .outer:hover::-webkit-scrollbar-thumb{ 51 background-color:rgba(0,0,0,.2); 52 border-radius:10px; 53 -webkit-box-shadow:inset 1px 1px 0rgba(0,0,0,.1); 54 } 55 </style> 56 </head> 57 <body> 58 <div class="outer"> 59 <div class="inner">list<br>list<br>list<br>list<br>list<br>list<br>list<br></div> 60 </div> 61 62 </body> 63 </html>