如何使用css影藏滚动条

1.单纯的一句代码：

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

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

<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;局部滚动在火狐浏览器滚动速度变慢不知道为什么。

巴特西

如何使用css影藏滚动条

最新文章

热门文章