如何使用css影藏滚动条

1.单纯的一句代码:

 div ::-webkit-scrollbar {width: 0px;}//或者display:none

  但是这代码最大的弊端就是只能在webkit内核的浏览器上进行显示,无法做Hack

2.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <meta name="renderer" content="webkit">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html,
        body {
            height: 100%;
        }
        
        html {
            overflow: hidden;
        }
        
        body {
            overflow: auto;
            width: calc(100vw + 20px);
        }
        
        .page {
            height: 200%;
            border: 1px dashed;
            width: 100vw;
        }
    </style>
</head>

<body>
    <div class="page">
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
        <p>我是文字啊啊啊啊啊th</p>
    </div>
</body>

  说说原理吧,首先是vw,vh这种css3单位不懂请百度,让body宽度是窗口宽度加上20px(浏览器滚动条差不多这个宽度),.page里面的宽度是100%视口也就是100vw,这样body的滚动条就被隐藏了(超出部分被html隐藏)。
优点:不用js(js必须页面加载完拿高度才准确)。
缺点:1、IE8不支持,2、移动端不用测试了,移动端滚动条没那么简单,3、overflow:auto;局部滚动在火狐浏览器滚动速度变慢不知道为什么。

posted @ 2017-11-02 16:02  明明一颗大白菜  阅读(513)  评论(0编辑  收藏  举报
<-- -->