-
隐藏滚动条
2019-07-03 09:07:37在前端页面开发时总会遇到想隐藏滚动条的问题,因为浏览器自带的滚动条样式可能会跟自己设计的不搭,会影响页面的美观,如下: 截图中的导航条因为有了滚动条感觉很不美观,这时就需要隐藏滚动条的同时还支持...在前端页面开发时总会遇到想隐藏滚动条的问题,因为浏览器自带的滚动条样式可能会跟自己设计的不搭,会影响页面的美观,如下:
截图中的导航条因为有了滚动条感觉很不美观,这时就需要隐藏滚动条的同时还支持滚动了,而最容易想到的方法就是加一个iscroll插件,但其实呢css也可以实现这个功能,而且代码不多,很简便,那就是计算滚动条宽度通过定位隐藏起来。
示例代码:
.inner{
height: 500px;
position: relative;
overflow: hidden;
}
#nav {
position: absolute;
left: 0;
top: 0;
right: -18px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
<div class="inner" >
<div class="link-holder" id="nav">
<ul style="">
<li>
<h3 class="nav_head navOne"><a href="javascript:;">单据管理</a></h3>
<div class="nav_body NavOne" style="display:none;overflow-y:initial;">
<a href="javascript:;" class="scroll-link" id="CGDHOUDAN">采购订货单</a>
<a href="javascript:;" class="scroll-link" id="DeliveryOdd">配送单</a>
<a href="javascript:;" class="scroll-link" id="GodownEntry">入库单</a>
<a href="javascript:;" class="scroll-link" id="SalesReturn">退货单</a>
<a href="javascript:;" class="scroll-link" id="MaterialRequisition">领料单</a>
<a href="javascript:;" class="scroll-link" id="MRSalesReturn">领料退货单</a>
<a href="javascript:;" class="scroll-link" id="WarehouseDBD">仓库调拨单</a>
<a href="javascript:;" class="scroll-link" id="RepertoryPanDian">库存盘点</a>
<a href="javascript:;" class="scroll-link" id="SelectSupplierGH">供应商供货查询</a>
</div>
</li>
</ul>
</div>
</div>
上面代码通过相对定位向右移动了18个像素,这就刚好可以隐藏掉滚动条,在谷歌和IE浏览器测试没有问题,代码效果如下:
-
隐藏滚动条css3实现滚动同时隐藏滚动条
2020-05-17 23:28:21项目场景需求要在局部实现滚动,但是滚动出现了滚动条,一瞬间感觉整个页面都不好了,经过努力css成功实现滚动同时隐藏滚动条,废话不多说,直接上代码 核心代码: ::-webkit-scrollbar{ display:none; } 使用...项目场景需求要在局部实现滚动,但是滚动出现了滚动条,一瞬间感觉整个页面都不好了,经过努力css成功实现滚动同时隐藏滚动条,废话不多说,直接上代码
核心代码:
::-webkit-scrollbar{ display:none; }
使用方法:设置滚动后在容器上添加该css样式;
ul::-webkit-scrollbar{ display:none; }
案例:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>隐藏滚动条</title> <style> ul{ margin: 50px auto; padding: 0; width:300px; height:400px; border:solid #000 2px; list-style: none; } li{ line-height:48px; background: yellowgreen; } ul{ overflow-x: hidden; overflow-y: scroll; } ul::-webkit-scrollbar{ display:none; } </style> </head> <body> <ul> <li>测试隐藏滚动条</li> <li>测试隐藏滚动条</li> <li>测试隐藏滚动条</li> <li>测试隐藏滚动条</li> <li>测试隐藏滚动条</li> <li>测试隐藏滚动条</li> <li>测试隐藏滚动条</li> <li>测试隐藏滚动条</li> <li>测试隐藏滚动条</li> <li>测试隐藏滚动条</li> <li>测试隐藏滚动条</li> <li>测试隐藏滚动条</li> </ul> </body> </html>
效果: