原理：实际上滚动条还是存在的，只是中间套一层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>
351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
