當網頁內容超出瀏覽器窗口大小時，就會出現滾動條。要控制滾動條的出現和樣式，我們可以使用CSS來實現。

首先，我們需要設置元素的height和width，確保元素的內容可以超出其大小。然后，我們可以使用overflow屬性來控制元素內容的滾動。

.example {
width: 200px;
height: 100px;
overflow: auto;
}

上面的代碼將在example元素超出200px x 100px時，自動添加滾動條。

我們還可以使用overflow-x和overflow-y屬性來控制水平和垂直方向的滾動條。例如：

.example {
width: 200px;
height: 100px;
overflow-x: hidden; /* 隱藏水平滾動條 */
overflow-y: scroll; /* 顯示垂直滾動條 */
}

如果我們想要自定義滾動條的樣式，可以使用::-webkit-scrollbar偽元素。例如：

.example::-webkit-scrollbar {
width: 8px;
}
.example::-webkit-scrollbar-thumb {
background-color: #ccc;
}
.example::-webkit-scrollbar-track {
background-color: #f9f9f9;
}

上面的代碼將滾動條的寬度設置為8像素，滾動條拇指的背景色設置為灰色，滾動條軌道的背景色設置為淺灰色。

總之，使用CSS可以輕松地控制滾動條出現和樣式，提高用戶體驗。