浏览器有自己的滚动条样式,但是可能不符合设计
先看看正常浏览器的样式
在css中改变滚动条样式,根据需要自行改动
/*滚动条的宽度*/
::-webkit-scrollbar {
width: 4px;
}
/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
border-radius: 2px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
}
/*滚动条里面轨道*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
然后在最外层盒子或者body加上hidden,防止出现底部滚动条
body {
overflow-x: hidden;
}
.container {
width: 100vw;
overflow-x: hidden;
}
看最后的效果图