使用css實現無滾動條滾動，摘抄自：曹小萌博客
使用css實現無滾動條滾動，大體思路是在div外面再套一個div。這個div設置overflow:hidden。而內容div設置 overflow-x: hidden;overflow-y: scroll;然后再設置外層div的width小於內容div的width，就是用一個無滾動條的div包裹另一個有滾動條的div，從而實現隱藏滾動條的效果。
直接擼代碼：
<body> <div class="box_wrap"> <ul> <li>測試數據1</li> <li>測試數據2</li> <li>測試數據3</li> <li>測試數據4</li> <li>測試數據5</li> <li>測試數據6</li> <li>測試數據7</li> <li>測試數據8</li> <li>測試數據9</li> <li>測試數據10</li> <li>測試數據11</li> <li>測試數據12</li> <li>測試數據13</li> <li>測試數據14</li> <li>測試數據15</li> <li>測試數據16</li> <li>測試數據17</li> <li>測試數據18</li> <li>測試數據19</li> <li>測試數據20</li> <li>測試數據21</li> <li>測試數據22</li> </ul> </div> </body>
body,html { margin: 0; padding: 0; height: 100%; overflow: hidden; } ul,li { margin: 0; padding: 0; list-style: none; } .box_wrap { margin: 20px auto; width: 200px; height: 400px; border: 1px solid #ccc; overflow: hidden; } .box_wrap ul { width: 220px;/* 多出20像素是滾動條的位置，會被父容器蓋住就看不到了 */ height: 100%; overflow-x: hidden; overflow-y: auto; } .box_wrap ul li { width: 200px; height: 40px; line-height: 40px; border-bottom: 1px solid #ccc; font-size: 12px; text-align: center; }
這樣可以實現無滾動條滾動，效果圖是這樣的
接下來我只用插件修改滾動條樣式
需要去掉box_wrap 的overflow: hidden; 讓滾動條顯示出來；
這個插件使用很簡單；這個插件需要引入jquery,mCustomScrollbar.js 和 jquery,mCustomScrollbar.css
$(".box_wrap ul").mCustomScrollbar({
setTop:"0"
});
直接綁上方法就可以了，加上過后的效果是這樣的
當然，這么丑的樣式我們肯定是不能接受的，那么接下來就修改它的css，改成自己想要的樣式，
/* =====自定義滾動條===== */ .mCSB_inside>.mCSB_container{ margin-right: 10px; } .mCSB_scrollTools{ width: 10px; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 100%; background-color: rgba(207,207,207,1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5cfcfcf,endColorstr=#E5cfcfcf); } .mCSB_scrollTools .mCSB_draggerRail{ background-color: rgba(255,255,255,.4); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66ffffff,endColorstr=#66ffffff); } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(207,207,207,1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5cfcfcf,endColorstr=#E5cfcfcf); } .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{ background-color: rgba(207,207,207,1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5cfcfcf,endColorstr=#E5cfcfcf); } .mCSB_scrollTools .mCSB_draggerRail{ width: 0; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 10px; }
這是下小胖自己修改的樣式，效果
這樣就好看多了，想要什么樣式都可以自己修改的，這個就的慢慢去調試了。