在網(wǎng)頁(yè)開(kāi)發(fā)中，蘋(píng)果瀏覽器Safari和Chrome默認(rèn)是不會(huì)顯示滾動(dòng)條的，這樣雖然會(huì)使頁(yè)面看起來(lái)更加簡(jiǎn)潔美觀，但是在某些情況下，用戶(hù)需要滾動(dòng)條來(lái)控制頁(yè)面內(nèi)容顯示，使得頁(yè)面更加友好。

CSS樣式可以幫助我們快速地實(shí)現(xiàn)滾動(dòng)條的顯示效果，接下來(lái)我們來(lái)看一下具體的實(shí)現(xiàn)方法。

/* 顯示垂直滾動(dòng)條 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: #F5F5F5;
}
/* 設(shè)置滾動(dòng)條的軌道樣式 */
::-webkit-scrollbar-track {
background-color: #F5F5F5;
}
/* 設(shè)置滾動(dòng)條的滑塊樣式 */
::-webkit-scrollbar-thumb {
background-color: #C2C2C2;
border-radius: 3px;
}
/* 鼠標(biāo)懸浮時(shí)滑塊樣式 */
::-webkit-scrollbar-thumb:hover {
background-color: #B3B3B3;
}
/* 顯示水平滾動(dòng)條 */
::-webkit-scrollbar-horizontal {
height: 6px;
background-color: #F5F5F5;
}
/* 設(shè)置水平滾動(dòng)條的軌道樣式 */
::-webkit-scrollbar-track-horizontal {
background-color: #F5F5F5;
}
/* 設(shè)置水平滾動(dòng)條的滑塊樣式 */
::-webkit-scrollbar-thumb-horizontal {
background-color: #C2C2C2;
border-radius: 3px;
}
/* 鼠標(biāo)懸浮時(shí)水平滑塊樣式 */
::-webkit-scrollbar-thumb-horizontal:hover {
background-color: #B3B3B3;
}

通過(guò)上述代碼，我們可以實(shí)現(xiàn)垂直和水平滾動(dòng)條的顯示效果，同時(shí)還可以設(shè)置滾動(dòng)條軌道和滑塊的樣式，使得滾動(dòng)條的顯示更加美觀。

需要注意的是，上述代碼只適用于Safari和Chrome瀏覽器，其他瀏覽器可能存在兼容性問(wèn)題。