web前端中,在正常的情况下如果隐藏滚动条,则会导致页面无法上下或左右滚动。但如果想达到隐藏滚动条又想不妨碍页面的滚动该如何做呢?下面我们就说一说如何使用CSS代码来达到隐藏滚动条的目的!

firefox(火狐)浏览器CSS隐藏滚动条的方法

对于火狐浏览器隐藏滚动条,只需要将滚动条的宽度设置为none即可!

CSS代码:

scrollbar-width: none; /* Firefox */

Chrome(谷歌)和Safari(苹果)浏览器隐藏滚动条的方法

对于Chrome与Safari浏览器,要使用CSS滚动条选择器,然后隐藏掉即可:

CSS代码

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

IE浏览器隐藏滚动条的方法

对于让我们头痛的IE浏览器来说,需要使用-ms-prefix属性定义滚动条样式!

注意:只支持IE10及IE10以上的浏览器,低版本的浏览器不启作用!

css代码:

-ms-overflow-style: none; /* IE 10+ */

CSS隐藏滚动条完整的示例代码

例1:CSS隐藏整个页面滚动条的方法

html完整代码:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>飞鸟慕鱼博客</title>
    <style>
        body{
            position: relative;
            height: 1888px;
            -ms-overflow-style: none; /* IE 10+ */
            scrollbar-width: none; /* Firefox */
        }    
        body::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }
        span{
            position: absolute;
            bottom: 1px;
            left: 0px;
        }
    </style>
</head>
<body>
   <span>我是最低的内容,看到我证明已到页面的低部了!</span>
</body>
</html>

例2:CSS隐藏某个元素的滚动条

html完整代码:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>飞鸟慕鱼博客-隐藏某个元素的滚动条</title>
    <style>
        .div1{
            height: 500px;
            width: 500px;
            overflow-x: auto;
            -ms-overflow-style: none; /* IE 10+ */
            scrollbar-width: none; /* Firefox */
        }    
        .cent{
            position: relative;
            height: 800px;
            width: 500px;
            background-color: #ffc107;
        }
        .cent span{
            color:red;
            position: absolute;
            left: 0;
            top: 0;
        }
        .cent span:last-child{
            bottom: 1px;
            top:auto;
        }
        /**
            隐藏滚动条(Chrome Safari)
        */
        .div1::-webkit-scrollbar {
            display: none; 
        }
    </style>
</head>
<body>
   <div class="div1">
        <div class="cent">
            <span>我是最顶部的内空,滚动鼠标可以看到最低的内容!</span>
            <span>我是最低部的内容!</span>
        </div>
   </div>
</body>
</html>

注意:隐藏元素的滚动条时,最好要将overflow属性的值设置为auto或scroll用来保证其内的内容是可以滚动的!