CSS 已經成為 Web 開發的基石之一，每時每刻都在不斷更新進化。近日，我們迎來了 CSS 新特性之一——scroll 。它解決了在一個元素內部的滾動的常見問題。現在就讓我們一起來探索一下這一新特性。

什么是 scroll ？

首先，我們來了解一下 scroll 是什么。scroll 是指一個元素內部的滾動。過去，我們只能使用 JavaScript 或其他工具來實現這個功能。但現在，我們可以使用 CSS 屬性來設置滾動行為。

如何使用 scroll ？

.box {
width: 300px;
height: 200px;
overflow: scroll;
}

如上代碼所示，我們可以使用 overflow 屬性來實現滾動。將屬性值設置為 "scroll"，當內容溢出容器時，就會出現滾動條。同時，我們還可以使用 "auto" 值，該值將根據內容是否溢出來自動添加滾動條。

其他值

.box {
overflow: visible; /* 默認值，內容會溢出容器 */
overflow: hidden; /* 內容會被裁剪，不會出現滾動條 */
overflow: auto; /* 自動添加或刪除滾動條 */
overflow: scroll; /* 總是添加滾動條 */
}

當然，還有其他一些值，這里列舉了常用的四個值。

scrollbar 樣式

.box::-webkit-scrollbar { /* webkit 瀏覽器下 */
width: 8px;
height: 8px;
}
.box::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 4px;
}
.box::-webkit-scrollbar-track {
background-color: #f5f5f5;
}

如果您想自定義滾動條的樣式，您可以使用 ::-webkit-scrollbar 相關屬性。

總結

在我們日常開發中，scroll 是一個非常實用的 CSS 新特性。通過設置 overflow 屬性的值，我們可以很輕松地實現內部滾動。同時，也可以使用 ::-webkit-scrollbar 相關屬性來定制滾動條的樣式。但請注意，這些屬性并非所有瀏覽器都支持，需要根據實際情況考慮兼容性問題。