先看一下最终的效果图吧:
第一种文字内容超出显示滚动条:
父盒子:横向超出滚动:overflow-x: scroll;
.box {width: 100%;box-sizing: border-box;overflow-x: scroll;}
子盒子:内容不换行 white-space:nowrap;
.item {white-space:nowrap;}
实现效果,超出滚动:如下图:
这个会发现即使内容没超出还是有滚动条占位如下图:
这里吧**overflow-x: scroll;换成overflow-x: auto;**即可解决,如下图,让他自适应添加滚动条
第二种:自定义滚动条样式:如下图
.box::-webkit-scrollbar{height:9px;background-color: #969696;}.box::-webkit-scrollbar-track{background: #e2e2e2;border-radius:2px;}.box::-webkit-scrollbar-thumb{background: #969696;border-radius:8px;}.box::-webkit-scrollbar-thumb:hover{background: #a5a5a5;}.box::-webkit-scrollbar-corner{background: #969696;}
这样一款完美的横向超出自动添加滚动条功能就完成了,你学废了吗,点个赞吧: