精华内容
下载资源
问答
  • 隐藏滚动条

    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浏览器测试没有问题,代码效果如下:

    展开全文
  • 项目场景需求要在局部实现滚动,但是滚动出现了滚动条,一瞬间感觉整个页面都不好了,经过努力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>
    

    效果:
    在这里插入图片描述

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,540
精华内容 1,816
关键字:

隐藏滚动条