div不显示滚动条但实现鼠标移上去可以上下滚动的效果

xiaoxiao2021-02-28  77

原理:实际上滚动条还是存在的,只是中间套一层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>

转载请注明原文地址: https://www.6miu.com/read-19248.html

最新回复(0)