显示浏览器滚动条、修改滚动条默认样式
显示横向或竖向滚动条
{
white-space: nowrap;//内容不换行,横向显示
overflow-x: scroll;//显示横向滚动条
overflow-y: scroll;//显示竖向滚动条
}
修改默认滚动条样式
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.div::-webkit-scrollbar{
width:8px;
height: 8px;
background-color: #F5F5F5;
}
/* 定义滚动条轨道 内阴影+圆角*/
.div::-webkit-scrollbar-track{
border-radius: 10px;
background-color: #F5F5F5;
webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
/*定义滑块 内阴影+圆角*/
.div::-webkit-scrollbar-thumb{
border-radius: 10px;
background-color: #555;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}
下面是自定义的效果,大概如下