CSS豎直的滾動條可以讓我們在頁面中展示長篇內容，同時也能使頁面更加美觀。

/* 創建豎直滾動條 */
div {
height: 200px; /* 定義滾動條容器的高度 */
overflow-y: scroll; /* 設置縱向滾動條 */
}
/* 隱藏滾動條 */
div::-webkit-scrollbar {
display: none;
}

以上是創建一個豎直滾動條的CSS代碼，其中我們通過overflow-y屬性來控制了容器的滾動條，而::-webkit-scrollbar則是用于隱藏滾動條的。

除了以上的基礎代碼，我們還可以使用各種樣式來美化滾動條。比如使用background-color屬性來為滾動條添加背景色，使用width屬性來調整滾動條寬度。

/* 美化滾動條 */
div {
height: 200px; 
overflow-y: scroll; 
scrollbar-width: thin;
scrollbar-color: #666 #eee;
}
div::-webkit-scrollbar {
width: 12px;
height: 12px;
}
div::-webkit-scrollbar-thumb {
background-color: #666;
}
div::-webkit-scrollbar-track {
background-color: #eee;
}

在上方的代碼中，我們通過scrollbar-width屬性來調整了滾動條的寬度，而scrollbar-color則是用來為滾動條添加顏色。而且，我們還通過::-webkit-scrollbar-thumb和::-webkit-scrollbar-track屬性來調整了滾動條的樣式，使得滾動條更加美觀。

總之，CSS豎直滾動條是在網頁設計中非常實用的功能，利用它可以實現更多的效果，讓我們的頁面更加生動、有趣。