css如何隐藏滚动条
墨初 Web前端 839阅读
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>