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隐藏滚动条的方法到此结束。一半明媚,一半阴霾,这就是人生。小编再次感谢大家对我们的支持!