原理:实际上滚动条还是存在的,只是中间套一层div让它的宽度比父div的宽度还要大,因此遮住了滚动条从而实现可以滚动的效果;
实现:
固定宽度的父模块加上样式:{width: 70px;overflow: hidden;}
中间套一层div设置height(可以设置为100%),设置width而且一定要比父div大(可以自己调整大小直到遮住滚动条就好),加上样式:
{ width: 76px; overflow-y: auto; overflow-x: hidden; height:100%; }
举个例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div style="border:1px solid black;width: 100px;height:200px;overflow: hidden;"> <div style="width: 118px;overflow-y: auto;overflow-x: hidden;height:100%;background-color:#f5f5f5;"> <ul> <li data-attr="0"><a href="javascript:void(0);">测试1</a></li> <li data-attr="0"><a href="javascript:void(0);">测试2</a></li> <li data-attr="0"><a href="javascript:void(0);">测试3</a></li> <li data-attr="0"><a href="javascript:void(0);">测试4</a></li> <li data-attr="0"><a href="javascript:void(0);">测试5</a></li> <li data-attr="0"><a href="javascript:void(0);">测试6</a></li> <li data-attr="0"><a href="javascript:void(0);">测试7</a></li> <li data-attr="0"><a href="javascript:void(0);">测试8</a></li> <li data-attr="0"><a href="javascript:void(0);">测试9</a></li> <li data-attr="0"><a href="javascript:void(0);">测试10</a></li> <li data-attr="0"><a href="javascript:void(0);">测试11</a></li> <li data-attr="0"><a href="javascript:void(0);">测试12</a></li> <li data-attr="0"><a href="javascript:void(0);">测试13</a></li> <li data-attr="0"><a href="javascript:void(0);">测试14</a></li> <li data-attr="0"><a href="javascript:void(0);">测试15</a></li> <li data-attr="0"><a href="javascript:void(0);">测试16</a></li> </ul> </div> </div> </body> </html>