先看一下最终的效果图吧：

第一种文字内容超出显示滚动条：
父盒子：横向超出滚动：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;
}

这样一款完美的横向超出自动添加滚动条功能就完成了，你学废了吗，点个赞吧：