先看一下最終的效果圖吧：

第一種文字內容超出顯示滾動條：
父盒子：橫向超出滾動：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; }

這樣一款完美的橫向超出自動添加滾動條功能就完成了，你學廢了嗎，點個贊吧：

總結

以上是生活随笔為你收集整理的div横向超出可滚动，自动添加滚动条，自定义滚动条样式，的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。