CSS伪类选择器::-webkit-scrollbar可以影响了一个元素的滚动条的样式。
语法:
::-webkit-scrollbar { styles here }
我们可以通过::-webkit-scrollbar选择器设置display属性为none来隐藏滚动条。
css滚动条选择器
我们可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:
::-webkit-scrollbar — 整个滚动条。
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)。
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块。
::-webkit-scrollbar-track — 滚动条轨道。
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分。
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分。
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)。
隐藏滚动条的方法:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--<style> ::-webkit-scrollbar {display:none} </style>--> </head> <body> <div style=" width:200px; height: 200px; overflow-y: scroll;"> 11111</br> 11111</br> 11111</br> 11111</br> 11111</br> 11111</br> 11111</br> 11111</br> 11111</br> 11111</br> 11111</br> </div> </body> </html>
效果图:
设置css效果前:
使用css设置滚动条不显示效果:
以上就是css如何隐藏滚动条?的详细内容,更多请关注0133技术站其它相关文章!