隐藏滚动条

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>

效果：

收起

展开全文