當我們在HTML界面中添加了過多的內容時，可能會出現無法下拉屏幕的情況。這會讓用戶的體驗變得不好，因此我們需要通過CSS來控制頁面的滾動條。

/* 隱藏頁面的滾動條 */
body {
overflow: hidden;
}
/* 自定義滾動條的樣式 */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: #f2f2f2;
}
::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}

以上代碼將隱藏整個頁面的滾動條，并自定義了滾動條的樣式。如果需要在某個容器中添加滾動條，可以為該容器設置固定高度并加上overflow屬性：

.container {
height: 300px; /* 設置容器高度 */
overflow: auto; /* 自動添加滾動條 */
}

這樣，就可以在需要添加滾動條的容器中實現自定義滾動條的效果，并優化用戶的體驗。