CSS下拉條可以讓頁面在內容太長時，用戶可以滑動頁面而不是一直向下滾動，這樣可以提高頁面的可用性。下面介紹一下如何制作豎屏的CSS下拉條。

/* 創建滾動條軌道 */
.scrollbar {
width: 8px;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
/* 創建滾動條滑塊 */
.scrollbar-thumb {
width: 8px;
height: 50px;
background-color: #ccc;
border-radius: 8px;
cursor: pointer;
}
/* 隱藏原生滾動條 */
body::-webkit-scrollbar {
display: none;
}
/* 為滑塊添加滾動事件 */
.scrollbar-thumb::-webkit-scrollbar-thumb {
background-color: #aaa;
}

以上是CSS的樣式代碼，接下來是HTML結構。

其中，container是頁面的容器，content是頁面的正文內容，scrollbar是滾動條的軌道，scrollbar-thumb是滾動條的滑塊。

最后，我們需要使用JavaScript代碼來實現滑塊的滾動效果。

var thumb = document.querySelector('.scrollbar-thumb');
var container = document.querySelector('.container');
var content = document.querySelector('.content');
thumb.style.top = (content.scrollTop / content.scrollHeight) * container.offsetHeight + 'px';
content.addEventListener('scroll', function() {
thumb.style.top = (content.scrollTop / content.scrollHeight) * container.offsetHeight + 'px';
});

這樣，我們就完成了CSS下拉條的制作。