盒子内部元素溢出自动生成滚动条,使用: overflow: scroll;
.drawerBox{width: 300px;height: 500px;border: 1px solid red;overflow: scroll; // 超出内容加滚动条}
去除滚动条显示:
// 去除滚动条显示.drawerBox::-webkit-scrollbar{display:none}
修改滚动条样式
//滚动条css.boxname::-webkit-scrollbar {/*滚动条整体样式*/width: 10px;/*高宽分别对应横竖滚动条的尺寸*/height: 10px;}.boxname::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 5px;// box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);background: #cecece;}.boxname::-webkit-scrollbar-track {/*滚动条里面轨道*/// box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);/*border-radius: 5px;*/background: #fff;}
设置滚动条横向滚动
父元素添加:
display: flex;overflow-x: auto;overflow-y: hidden;
子元素添加:
flex-shrink: 0;