CSS外側滾動條是一種讓網頁內容可以橫向滾動的方法，它在一些需要提供超長內容，但又不適合放置在頁面中央的場景下，能發(fā)揮很好的作用。

/* 定義外側滾動條 */
body {
overflow-x: auto;
padding-bottom: 30px; /* 預留滾動條高度，避免重疊 */
}
/* 樣式調整 */
::-webkit-scrollbar {
height: 8px;
background: #f5f5f5;
border-radius: 4px;
}
/* 滑塊 */
::-webkit-scrollbar-thumb {
background: #999;
border-radius: 4px;
}
/* 當滾動條處于激活狀態(tài)（被點擊）時 */
::-webkit-scrollbar-thumb:active {
background: #666;
}

代碼的解釋：

對 body 設置 overflow-x:auto，這意味著在超出頁面寬度時，會自動添加水平滾動條。用 padding-bottom 屬性添加空白，避免滾動條和頁面內容重疊。

添加外側滾動條完畢后，可以調整其樣式，如高度、背景顏色以及滑塊圓角等。在最后三行代碼中，設定了滑塊的背景顏色，以及滾動條激活時滑塊的顏色。總體來說，CSS外側滾動條完美解決了網頁超長內容無法完整展示的問題。