春雨沙沙地下着，有如绣花针，有如牛毛。河面雪融化了，雪水汇成小溪，淙淙地流着。河水中，一只只小蝌蝌顽皮地游着，好似找它妈妈，可爱极了。
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用来保证其内的内容是可以滚动的！
本文CSS隐藏滚动条的方法到此结束。一半明媚，一半阴霾，这就是人生。小编再次感谢大家对我们的支持！
