如何確保捲軸在手機瀏覽器中始終可見？

如何在行動瀏覽器中顯示捲軸

儘管CSS 屬性如「overflow:auto」和「overflow:visible」顯示滾動滾動條與桌面瀏覽器不同，行動瀏覽器通常會隱藏它們，直到滾動開始。本文介紹如何使捲軸在行動裝置上始終可見，即使不使用無效的 jQuery 函式庫。

考慮以下HTML 和CSS 程式碼：

<div>
<pre class="brush:php;toolbar:false">#wrapper {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 500px;
    height: 200px;
}

#frameContent {
    width: 100%;
    height: 100%;
}

要製作捲軸要在行動裝置上始終可見，請新增下列CSS：

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

此程式碼特定於WebKit 瀏覽器引擎，可修改捲軸的外觀，確保其在行動裝置上的可見性。