失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > css给超出内容设置滚动条和去除滚动条显示:

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

时间:2022-07-05 01:15:30

相关推荐

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

盒子内部元素溢出自动生成滚动条,使用: 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;

如果觉得《css给超出内容设置滚动条和去除滚动条显示:》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。