hi,欢迎访问本站!
当前位置: 首页Web前端正文

css如何隐藏滚动条

墨初 Web前端 683阅读

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

firefox浏览器隐藏滚动条

在火狐浏览器中,直需要把滚动条的宽度设置为none,就可以隐藏掉滚动条件。

例:

scrollbar-width: none; /* Firefox */

Chrome与Safari浏览器隐藏滚动条

对于Chrome(谷歌)与Safari(苹果)浏览器来说,直接隐藏掉滚动条就可以。

例:

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

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

IE浏览器中使用-ms-prefix属性定义滚动条样式,并且只以IE10以及IE10以上版本的浏览器有用,低版本的浏览器不行。

例:

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

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

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>73so.com</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隐藏某个元素的滚动条

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>73so.com</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>
标签:
声明:无特别说明,转载请标明本文来源!
相关推荐