在一些移動設備或瀏覽器上，我們可能會發現頁面上的滾動條沒有出現，而我們又需要它來提高用戶的交互體驗和導航效率。這時候，我們需要使用 CSS 來控制手機的滾動條樣式，并使其在出現時更加美觀與易于使用。

/* 禁止顯示默認滾動條 */
body{
-webkit-overflow-scrolling:touch;
overflow:hidden;
}
/* 自定義滾動條樣式 */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #ccc;
}
/* 當滾動條處于 hover 狀態下，變為深灰色 */
::-webkit-scrollbar-thumb:hover {
background-color: #999;
}

在這個示例 CSS 代碼中，我們首先使用了-webkit-overflow-scrolling:touch屬性來不斷滾動頁面時平滑地滑動，并禁止了默認的滾動條出現。然后使用::-webkit-scrollbar屬性定義了滾動條的寬度，::-webkit-scrollbar-thumb屬性定義了滑塊的樣式和背景顏色，并在hover狀態下改變滑塊的背景顏色。

需要注意的是這里用到了一些-webkit-前綴才能在某些設備和瀏覽器上生效。如果想要在其它非 iOS 或 Android 系統下的移動設備上實現相同的效果，可查閱相關文檔了解該系統所支持屬性。