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