关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

css给超出内容设置滚动条和去除滚动条显示:

发布时间:2023-06-29 18:00:42
盒子内部元素溢出自动生成滚动条,使用:  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;

/template/Home/leiyu/PC/Static