像滚动条的控制样式我们基本知道,看下:
::-webkit-scrollbar // 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar // 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar-button // 滚动条两端的按钮
::-webkit-scrollbar-track // 外层轨道
::-webkit-scrollbar-track-piece // 内层滚动槽
::-webkit-scrollbar-thumb // 滚动的滑块
::-webkit-scrollbar-corner // 边角
::-webkit-resizer // 定义右下角拖动块的样式
针对不同的浏览器,有不同的隐藏滚动条的方法,以下针对三大浏览器 chrome、ie(包括 edge)、firefox 分别叙述之:
Chorme
body::-webkit-scrollbar {
display: none;
}
IE/Edge
body {
-ms-overflow-style: none;
}
Firefox
firefox 是三者之中最麻烦的:
html {
/*注意!若只打 hidden,chrome 的其它 hidden 会出问题*/
overflow: -moz-hidden-unscrollable;
height: 100%;
}
body {
height: 100%;
/*浏览器滚动条的长度大约是 18px*/
width: calc(100vw + 18px);
overflow: auto;
}
到此还没结束,你还要在一些地方加上width: 100vw;。
假设你的HTML长这样:
山有木兮木有枝,心悦君兮君不知。